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

【问题标题】：Why does applying '-webkit-backface-visibility: hidden;' fix issues with negative margin transition on on ios / ipad 5.1?为什么应用'-webkit-backface-visibility: hidden;'修复 ios / ipad 5.1 上的负边距过渡问题？
【发布时间】：2012-12-06 19:27:36
【问题描述】：

我偶然发现了一个解决我的问题的方法 - 我不喜欢应用我不理解的修复。

<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;
}

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

【问题讨论】：

标签： ipad ios5 css css-transitions translate-animation

【解决方案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 样式的组合可以实现更好的过渡：)

【讨论】：