Question

我想了解如何解决这个问题。如果屏幕上没有太多图形（图像，背景图像等），则转换正常（或者只是足够接近以考虑为正常），但是当页面上有图形（静态）时，过渡变得不可见。它的移动版FireFox和默认的Android浏览器非常非常滞后，但Android上的Chrome（移动）做得很好。没有用苹果测试它，很高兴听到它也在那里做，但主要的问题是如何解决这个问题，所以它将在FF和默认的android浏览器上工作。

更新：很高兴看到如何通过这个示例强制GPU加速，因为我没有强制它，或者至少，它甚至没有提高性能。我使用以下代码作为背景图像（将其移动到容器中以便不应用于整个身体），输入和div

代码：

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform: translateZ(0);
transform: translateZ(0);

HTML：

<span>
  <img src="https://image.flaticon.com/teams/new/1-freepik.jpg" alt="">
  <img src="https://material.io/guidelines/static/images/callouts/default.svg" alt="">
  <img src="https://maxcdn.icons8.com/Share/icon/Cinema//martian_filled1600.png" alt="">
</span>
<div>
  <input type="text" class="test">
</div>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>

CSS：

body {
  min-height: 100vh;
  background: url("http://static.boredpanda.com/blog/wp-content/uploads/2016/04/how-photographers-photoshop-their-images-landscape-photography-peter-stewart-22b.jpg") no-repeat 100% 50%;
    background-size: cover;
}
span {
  display:block;
  margin: 200px auto;
  background: #fff;
  width: 300px;
  text-align:center;
}
div {
  background: #333;
  margin: 10px auto;
  text-align: center;
  width: 300px;
}
img {
  width: 50px;
  height: 50px;
  margin: 0 auto;
}
.test {
  margin: 20px;
  transition: 0.5s;
}
.test:focus {
  margin-top: 100px;
  transition: 0.5s;
}

移动中的CSS转换 - 使用FF延迟，与Chrome

0 个答案: