为什么要应用'-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样式的组合可以实现更好的过渡:)