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: scrollabsolute位置或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到可接受的问题。 我遵循这一点,并根据我的需求进行修改

http://tobiasahlin.com/blog/how-to-animate-box-shadow/

对于我来说,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)”强制硬件渲染 – 所以他们现在可能会忽略这些假的价值观。

=>使用实际的值可能会导致事情“坚持”。

无论如何,为我工作。