iPhone的WebKit CSSanimation会导致闪烁
这是iPhone的网站： http : //www.thevisionairegroup.com/projects/accessorizer/site/
点击“立即游戏”后，您将进入游戏。 枪会滚动。您可以上下滚动钱包和配件。 你可以看到，当你放开它们时，它们会卡入到位。 就在这个瞬间发生时，就会出现闪烁。 我使用的唯一的webkitanimation是：
'-webkit-transition': 'none' '-webkit-transition': 'all 0.2s ease-out' '-webkit-transform': 'translate(XXpx, XXpx)' 我根据是否需要animation来select第一个或第二个转换，而转换是我移动的唯一方法。
最大的问题是，当你点击“匹配项目”，然后点击“再次播放”。 你会看到，作为枪的animation，整个背景的配件/钱包变白。 有人可以请我散发一些洞察力为什么这是发生？
我添加了-webkit-backface-visiblity ，而且主要是帮助，但是在重新加载页面后我仍然有一个初始的闪烁。 当我添加-webkit-perspective: 1000 ，没有任何闪烁。
-webkit-perspective: 1000; -webkit-backface-visibility: hidden;
试试这个，希望这会有所帮助：
#game { -webkit-backface-visibility: hidden; }
body {-webkit-transform:translate3d(0,0,0);}
我的情况的实际答案就在这里。 有人接近：-webkit-backface-visibility：hidden; 但真正的答案是-webkit-backface-visibility：hidden; 需要被添加到父 div。
我也有一个“闪烁”CSS转换的问题。 有问题的animation是从屏幕上滑入的菜单，当animation完成时，整个菜单闪烁/闪烁。
事实certificate，这是由一个实际的iOSfunction引起的，即“点击高亮” ，由于某种原因，在CSSanimation完成之后（即在实际点击之后）踢了一下，并突出显示了整个菜单而不是单个元素那是窃听。 我通过完全停用tap-highlight来“解决”问题，如下所述：
-webkit-tap-highlight-color: rgba(0,0,0,0);
Michael的回答 -webkit-backface-visibility: hidden; 当我们遇到这个问题时工作。 我们在我们的<body>标签上使用translateZ(0px)来防止iOS 3.1.3和更早版本的IFRAME边界错误，并导致闪烁。 添加-webkit-backface-visibility: hidden; 到每个元素我们animation固定的闪烁！ 拯救生命。
div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
我注意到，当我有一个div的hover状态页面会闪烁，即使我没有任何css或js附加到它。 也许这有助于别人。
如果有人发现backface-visibility不起作用，那么可以看看animation元素中已有的属性。 对于我们来说，我们发现overflow-y: scroll在absolute位置或fixed位置的元素上overflow-y: scroll导致了iOS上的重大闪烁。
简单地删除overflow-y: scroll修复它。
尽pipe我有-webkit-transform-style: preserve-3d; 和-webkit-backface-visibility: hidden闪烁仍在发生。
在我的情况下，原因是z-index 。 增加活动元素确实有帮助。
这是一个新的解决scheme。 我使用jQuery设置背景图像，并没有任何3d渲染技巧的工作。 所以我尝试使用类来定义属性。 瞧！ 像黄油一样光滑。
这会导致闪烁：
$('#banner').css('backgroundImage', 'url("slide_1.jpg")';
相反：
$('#banner').attr('class', '.slide-1');
定义了类：
#banner { -webkit-transition: background-image .25s; } .slide-1 { background-image: url("slide_1.jpg"); } .slide-2 { background-image: url("slide_2.jpg"); }
试试这个解决scheme 它在Phonegap + jQM 1.4.0中适用于我：
改变这个<meta name="viewport" content="width=device-width, initial-scale=1">
对此而言：
<meta name="viewport" content="width=device-width, user-scalable=no" />
阅读更多： http : //www.fishycode.com/post/40863390300/fixing-jquery-mobiles-none-transition-flicker-in
我花了很多时间试图找出这个问题的烬气animation奥特莱斯，Phonegap和iOS设置。
虽然很简单，但我必须为包含在cssanimation中的每个顶级父元素添加一个背景。 换句话说，请确保您的视图中没有任何一个元素没有背景。
我的设置是为每个模板，所有三个元素都有一个背景颜色分配给他们：
<header></header> <body class="content"></body> <footer></footer>
而不是应用到“全部”的过渡只是指定一个你真正需要的。 它消除了我的情况闪烁。
我尝试了以上所有内容，但仍然在Firefox和Chrome上出现重大闪烁问题。 我解决了这个问题，或者至less通过删除在animation过程中导致许多重绘的盒子阴影转换，将它大大地减less到可接受的问题。 我遵循这一点，并根据我的需求进行修改
对于我来说，Safari浏览器上的闪烁问题通过删除will-change: transform;来解决will-change: transform; 到animation元素。
也可以通过添加overflow: hidden;来解决这个问题overflow: hidden; 但是对于这个，所有具有transform: translateZ()元素transform: translateZ()无效的
我不得不使用实际值（而不是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）”强制硬件渲染 – 所以他们现在可能会忽略这些假的价值观。
=>使用实际的值可能会导致事情“坚持”。
无论如何，为我工作。
