ipad - 为什么应用 '-webkit-backface-visibility: hidden;' 可以修复 ios/ipad 5.1 上的负边距过渡问题？

Question

我偶然发现了针对我的问题的修复程序 - 我不喜欢应用我不理解的修复程序。

<ul>
  <li><img src="something.jpg" /></li>
  <li><img src="somethingElse.jpg" /></li>
  [+12 more <li>'s]
</ul>

我认为相关的 css 样式的概要是:

ul {
  position: absolute;
  list-style-type: none;
  top: 0;
  left: 0;
}
li {
  position: relative;
  height: 900px;
  width: 500px;
  float: left;
}
img {
  display: block;
  margin: 0 auto;
}

问题:当应用执行过渡以将整组图像向左移动的过渡时，即:

ul {
  left: -3000px;
}

它在除 ios 5.1 以外的任何地方都运行良好，它偶尔会运行，但更常见的是它最初执行过渡，然后恢复显示它“成功”设置的最后一张图像(例如，第一张图像，或过渡设置为正确)。

将此添加到 css:

ul {
  -webkit-backface-visibility: hidden;
}

使一切正常工作。这对我来说没有意义，我只是在尝试找出如何停止转换之间的闪烁时偶然发现的。

Answer 1

我想我可能真的已经找到了原因。

正在使用的过渡库似乎有一个错误，这意味着 translate() 被用于过渡，而不是 translate3d() 尽管它可用。

更改此后，额外的 css 规则:

-webkit-backface-visibility: hidden;

不再有任何影响 - 转换将 dom 节点移动到没有它的正确位置。

我由此推断，css 规则以某种方式强制在对象上使用 translate3d() 方法。

但是，为了停止帧之间有点锯齿的移动，我仍然需要添加:

ul {
  -webkit-transform: translate3d(0,0,0);
}

我只是通过反复试验发现的:用建议的“修复”来填充我的 css:

-webkit-perspective: 0;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
visibility:visible;

并确保使用了“translate3d”，然后我逐渐删除了 css“fixes”，直到它只是“-webkit-transform: translate3d(0,0,0);”在一个地方是必要的。

因此，将正确调用动画并在一个地方应用 css 样式相结合，可以实现更好的过渡:)