Question

我发现在移动版Safari /（iPad和iPhone）中查看时，很难对我的投资组合网站http://robthwaites.com上的过渡动画的缓慢/笨拙渲染进行故障排除。

当您点击我的主页缩略图时，.presentation内容会在转换后出现，其中一些大的div转换出来（div.workdoor-top和div.workdoor-bottom，每个都有一个大的三角形灰色背景SVG）。创造一种45度角的擦拭＆＃39;效果。

使用jQuery .addClass（）提示转换（将.hidden类添加到div）。在任何桌面浏览器中，Transition都非常流畅。

我想我已经按照本文中的提示进行操作，保持转换为转换：仅限translateX。 http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

我曾尝试使用Chrome Dev Tools时间轴来观察问题所在，该时间轴显示了此次转换时发生的大量重新计算样式，但我不确定这种情况发生在哪里以及我如何解决它。

更改PNG的SVG背景图像无助于提高性能。

对不起，我不能说清楚，但我想知道是否有可能（a）使用Chrome开发工具时间轴（或另一个开发工具）解决问题，并且（b）找到一个修复，这样可以在移动设备上顺畅地制作动画。

此处的网站已完整CSS。 DIV有问题，转换如下。

.workdoor-top {
  position: absolute;
  top: 0%;
  right: 0%;
  z-index: 30;
  width: 2000px;
  height: 2000px;
  background: url(../portfolio-door-top.svg) top right no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  pointer-events: none;
  -webkit-transition: -webkit-transform 0s ease;
  transition: transform 0s ease;
  -webkit-transform: translate(0px, 0);
  -ms-transform: translate(0px, 0);
  transform: translate(0px, 0);
}
.workdoor-top.hidden {
  -webkit-transform: translate(2000px, 0);
  -ms-transform: translate(2000px, 0);
  transform: translate(2000px, 0);
  -webkit-transition: -webkit-transform 1s ease;
  transition: transform 1s ease;
}
.workdoor-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 30;
  width: 2000px;
  height: 2000px;
  background: url(../portfolio-door-bottom.svg) bottom left no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  pointer-events: none;
  -webkit-transition: -webkit-transform 1s ease;
  transition: transform 1s ease;
  -webkit-transform: translate(-15px, 0);
  -ms-transform: translate(-15px, 0);
  transform: translate(-15px, 0);
}
.workdoor-bottom.hidden {
  -webkit-transform: translate(-2000px, 0);
  -ms-transform: translate(-2000px, 0);
  transform: translate(-2000px, 0);
  -webkit-transition: -webkit-transform 0s ease;
  transition: transform 0s ease;
}

Answer 1

尝试添加此内容：

.workdoor-top, .workdoor-top.hidden, .workdoor-bottom, .workdoor-bottom.hidden {
    -webkit-transform: translateZ(0);
}

应强制设备使用硬件加速。

或者，这些属性中的任何一个也应该起作用：

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

这里有一篇很好的帖子解释这个： http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/

CSS动画转换：在iPad上翻译性能不佳

1 个答案: