iPhone WebKit CSS 动画导致闪烁
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2946748/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iPhone WebKit CSS animations cause flicker
提问by Jake Chapa
This is the iphone site: http://www.thevisionairegroup.com/projects/accessorizer/site/
这是 iphone 网站：http: //www.thevisionairegroup.com/projects/accessorizer/site/
After you click "play now" you'll get to a game. The guns will scroll in. You can scroll the purse and accessories up and down. You can see that when you let go they snap into place. Just as that snap happens, there's a flicker that occurs. The only webkit animations I'm using are:
单击“立即播放”后，您将进入游戏。枪将滚动。您可以上下滚动钱包和配件。您可以看到，当您松开时，它们会卡入到位。就在那个瞬间发生的时候，出现了一个闪烁。我使用的唯一 webkit 动画是：
'-webkit-transition': 'none'
'-webkit-transition': 'all 0.2s ease-out'
'-webkit-transform': 'translate(XXpx, XXpx)'
I choose either the first or second transition based on whether or not I want it to animate, and the transform is the only way I move things around.
我根据是否想要动画来选择第一个或第二个过渡，而变换是我移动事物的唯一方式。
The biggest issue though is when you click "Match items", then click "Play again". You'll see as the guns animate in, the entire background of the accessories/purses goes white. Can someone please radiate me with some insight asto why this is happening??
但最大的问题是当您单击“匹配项目”，然后单击“再次播放”时。你会看到当枪械进入时，配件/钱包的整个背景变成白色。有人可以告诉我为什么会发生这种情况吗？
回答by Wes Baker
I added -webkit-backface-visiblityand that mostly helped, but I still had an initial flicker after reloading the page. When I added -webkit-perspective: 1000, there was no flicker whatsoever.
我添加了-webkit-backface-visiblity，这主要有帮助，但在重新加载页面后我仍然有初始闪烁。当我添加时-webkit-perspective: 1000，没有任何闪烁。
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
回答by donohoe
Try this, and hopefully it will help:
试试这个，希望它会有所帮助：
#game {
-webkit-backface-visibility: hidden;
}
回答by Brian D'Astous
body {-webkit-transform:translate3d(0,0,0);}
回答by Johan De Silva
The actual answer for my case is here. Someone was close with: -webkit-backface-visibility: hidden; But the real answer is -webkit-backface-visibility: hidden; needs to be added to the parentdiv.
我的案例的实际答案在这里。有人接近：-webkit-backface-visibility: hidden; 但真正的答案是 -webkit-backface-visibility: hidden; 需要添加到父div。
回答by fresskoma
I had a problem with a "flickering" CSS transition as well. The animation in question was a menu sliding in from off screen, and just when the animation finished, the entire menu flashed/flickered.
我也遇到了“闪烁”CSS 过渡的问题。有问题的动画是一个从屏幕外滑入的菜单，就在动画完成时，整个菜单闪烁/闪烁。
As it turned out, this was caused by an actual iOS feature, the "tap highlight", which for some reason kicked in after the CSS animation finished (i.e. way after the actual tap), and highlighted the entire menu instead of only the element that was tapped. I "fixed" the issue by entirely disabling tap-highlight, as described here:
事实证明，这是由实际的 iOS 功能“点击突出显示”引起的，出于某种原因，该功能在 CSS 动画完成后（即实际点击后）启动，并突出显示整个菜单而不是仅突出显示元素那是被窃听的。我通过完全禁用自来水亮点“固定”的问题，如所描述这里：
-webkit-tap-highlight-color: rgba(0,0,0,0);
回答by Rob Barreca
Michael's answer-webkit-backface-visibility: hidden;worked when we hit this problem. We had translateZ(0px)on our <body>tag to prevent an iOS 3.1.3 and earlier IFRAMEboundary bug and it caused anims to flicker. Adding -webkit-backface-visibility: hidden;to each element we animated fixed the flicker! Life saver.
-webkit-backface-visibility: hidden;当我们遇到这个问题时，迈克尔的回答奏效了。我们translateZ(0px)在我们的<body>标签上防止了 iOS 3.1.3 和更早的IFRAME边界错误，它会导致动画闪烁。添加-webkit-backface-visibility: hidden;到我们动画的每个元素都修复了闪烁！救命稻草。
回答by Jesse
div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
i noticed when i had a hover state on a div the page would flicker, even if i did not have any css or js attached to it. maybe this helps someone else.
我注意到当我在 div 上有一个悬停状态时，页面会闪烁，即使我没有附加任何 css 或 js。也许这对其他人有帮助。
回答by KendallB
If anyone finds that backface-visibility is not working, you might look at the properties already on your animated element. For us, we found that overflow-y: scrollon an absoluteor fixedpositioned element was causing major flickering on iOS.
如果有人发现背面可见性不起作用，您可以查看动画元素上已有的属性。对我们来说，我们发现overflow-y: scroll在一个absolute或fixed定位的元素上导致 iOS 上的主要闪烁。
Simply removing overflow-y: scrollfixed it.
只需删除即可overflow-y: scroll修复它。
回答by Morpheus
Even though I had -webkit-transform-style: preserve-3d;and -webkit-backface-visibility: hiddenthe flicker was still happening.
即使我有-webkit-transform-style: preserve-3d;并且-webkit-backface-visibility: hidden闪烁仍在发生。
In my case the cause was the z-index. Increasing it on active element did help.
在我的情况下，原因是z-index. 在活动元素上增加它确实有帮助。
回答by d1ch0t0my
I tried all the above and still had major flickering problems on Firefox and Chrome. I fixed it, or at least greatly reduced it to an acceptable issue by removing the box-shadow transform that was causing many repaints during the animation. I followed this and modified for my needs:
我尝试了上述所有方法，但在 Firefox 和 Chrome 上仍然存在主要的闪烁问题。我修复了它，或者至少通过删除在动画过程中导致多次重绘的框阴影变换将其大大降低到可以接受的问题。我遵循了这个并根据我的需要进行了修改：
