logo标签列表

iPhone的WebKit CSS动画导致闪烁问题

iphonecssanimationwebkitflicker
88

这是 iPhone 网站： http://www.thevisionairegroup.com/projects/accessorizer/site/

点击“现在播放”，您将进入一个游戏。枪支将滚动进入。您可以上下滚动钱包和配件。当您松开时，它们会自动对齐。就在对齐发生的同时，会出现闪烁。我所使用的仅是 webkit 动画：

'-webkit-transition': 'none'

'-webkit-transition': 'all 0.2s ease-out'

'-webkit-transform': 'translate(XXpx, XXpx)'

我根据是否需要动画来选择第一或第二个转换，而变换是移动物品的唯一方法。

最大的问题是，当你点击“匹配物品”，然后点击“再玩一次”时。你会发现当枪支动画播放时，饰品/钱包的整个背景都变成了白色。有人可以给我解释一下为什么会这样吗？

21个回答
129

我添加了-webkit-backface-visiblity，这在很大程度上有所帮助，但是重新加载页面后仍然会出现一些闪烁。当我添加了-webkit-perspective: 1000时，就完全没有任何闪烁了。

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
21
1000的魔力在哪里？是否还有其他数值（>0）可以发挥作用？ - cYrus
1
注意：添加backface-visibility属性会改变颜色的渲染。以下是开启和关闭backface visibility的示例链接：http://bit.ly/13ldbvY - Tamik Soziev
3
在尝试转换链接元素时，我遇到了文本闪烁的问题。更改背面可见性会改变抗锯齿效果，使字体变得非常细。通过使用“-webkit-font-smoothing：subpixel-antialiased;”进行修复。 - Dan
不理解为什么这个答案没有被接受。这个解决方案真的修复了在Google Chrome中因为我使用的CSS3过渡效果而产生的非常恼人的闪烁问题。非常感谢分享这个方法。 - Devner
2
@cYrus 我想我们永远不会知道。 - Denny
显示剩余7条评论
40

尝试这个，希望能帮到你：

#game {
  -webkit-backface-visibility: hidden;
}
2
这在Safari默认模式下运行得很好，但在独立模式下失败了。你有什么想法吗？ - cYrus
22
body {-webkit-transform:translate3d(0,0,0);}
1
这对我起作用了.. 但是我不得不将其应用于一个名为 #wrapper 的元素，因为将其应用于 body 会破坏布局。 - adamJLev
1
如果有人想查看背面，"-webkit-backface-visibility: hidden;" 不起作用，但这个是完美的。谢谢！ - Nachtgold
-webkit-backface-visibility: hidden; 会导致任何缩放变换变得模糊。 body {-webkit-transform:translate3d(0,0,0);} 很有效。 - Liam
我正在尝试，但对我来说不起作用。这是一段代码片段：http://www.codeply.com/go/g7Zp98paz5 - Fran_gg7
2
这对我有用。在我的情况下，scale(1) 导致了闪烁。非常感谢。 - jansesun
13
我的情况的实际答案在这里。有人接近了：-webkit-backface-visibility: hidden; 但真正的答案是需要将-webkit-backface-visibility：hidden;添加到父 div中。
我实际上需要在父div、动画div和动画div的子元素中添加“-webkit-backface-visibility: hidden;”。一旦我这样做了，它就完美地工作了。 - mattstuehler
2
我认为通过将其添加到父级，可以解决闪烁问题。它实际上是做什么的？ - chovy
将其添加到父元素会取消子元素上的“固定”位置 :( - James
12

我也遇到了一个“闪烁”的CSS过渡问题。这个动画是一个菜单从屏幕外滑入，当动画结束时，整个菜单会闪烁。

事实证明，这是由于一个实际的iOS特性引起的，即“tap highlight”，由于某种原因在CSS动画完成后（即实际触摸之后很久），突然启用并突出显示了整个菜单，而不仅仅是被点击的元素。我通过完全禁用“tap-highlight”来“解决”这个问题，方法在这里描述：

-webkit-tap-highlight-color: rgba(0,0,0,0);
5

Michael的答案 当我们遇到这个问题时，-webkit-backface-visibility: hidden; 起了作用。我们在 <body> 标签上使用了 translateZ(0px) 来防止 iOS 3.1.3 及更早版本的 IFRAME 边界 bug，但它导致动画闪烁。将 -webkit-backface-visibility: hidden; 添加到我们每个要进行动画处理的元素中，解决了闪烁问题! 救星。

3
div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

我注意到当我在一个div上设置hover状态时，页面会闪烁，即使没有任何CSS或JS与之相关。也许这对其他人有所帮助。

对我来说，那个解决了问题。其他的只有在转换过程中才相关。 - Nadav
3
如果发现背面可见性未生效，您可以查看已经应用在动画元素上的属性。对于我们来说，我们发现在iOS上，绝对或固定定位元素上的overflow-y:scroll会导致严重的闪烁问题。
只需删除overflow-y:scroll即可解决问题。
移除 overflow-y: scroll 对我的情况有所帮助。非常感谢！ - YemSalat
1
可能也是我的情况。但我无法移除此元素的overflow-y或absolute position。有什么想法吗？ - Kobi Cohen
1

我必须使用实际值（而不是0）：

.no-flick{
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform:translateZ(0.1px);
    transform: translateZ(0.1px); /* needs an actual value */
}

例子：

<div class="foo no-flick"></div>

据我所读, 闪烁是由于浏览器在硬件和软件渲染之间切换引起的。我认为浏览器制造商知道可以使用"translate3d(0,0,0)"来强制进行硬件渲染，因此他们现在可能忽略这些虚假值。

=> 使用实际值可能会导致问题"粘滞"。

总之，对我来说行得通。

1
我找到了一个解决方案，可以解决其他方法无法正常工作的问题。
CSS:
.ios-animation-fixer {
  position: fixed;
  width: 100%;
  height: 10px;
  top: -10px;
  background-color: green;
  z-index: 1;
  pointer-events: none;
  visibility: hidden;
}

HTML：

<div class="ios-animation-fixer"></div>

然后将动画元素的z-index设置为>1。这种方式可以在iOS设备上以不同的方式渲染动画，并避免我所遇到的闪烁问题。如果此解决方案不能直接奏效，调整z-index的值可能会有所帮助。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接