iPhone WebKit CSS动画导致闪烁


iPhone WebKit CSS animations cause flicker

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

单击"立即玩"后，您将进入游戏。 枪支将滚动。您可以上下滚动钱包和配件。 您可以看到，放开时它们会卡入到位。 就像发生这种情况一样，也会发生闪烁。 我使用的唯一Webkit动画是：

1
2
3
4
5
'-webkit-transition': 'none'

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

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

我根据是否要设置动画来选择第一个或第二个过渡，而变换是我四处移动的唯一方法。

但是最大的问题是，当您单击"匹配项目"，然后单击"再次播放"时。 您会看到枪响动，配件/钱包的整个背景变成白色。 有人可以向我辐射一下为什么会发生这种情况吗？

我添加了-webkit-backface-visiblity，并且对大多数情况有所帮助，但是重新加载页面后，我仍然出现了初始闪烁。当我添加-webkit-perspective: 1000时，没有任何闪烁。

1
2
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

相关讨论

试试这个，希望对您有帮助：

1
2
3
#game {
  -webkit-backface-visibility: hidden;
}
相关讨论

1
body {-webkit-transform:translate3d(0,0,0);}
相关讨论

我的情况的实际答案在这里。有人接近：-webkit-backface-visibility：隐藏；但是真正的答案是-webkit-backface-visibility：隐藏；需要添加到父div。

相关讨论

我也遇到了"闪烁的" CSS过渡问题。所讨论的动画是从屏幕外滑入的菜单，并且当动画结束时，整个菜单都会闪烁。

事实证明，这是由iOS的实际功能"点击突出显示"引起的，由于某些原因，该功能在CSS动画结束后(即实际点击之后)插入，并突出显示了整个菜单，而不是仅突出显示了元素被窃听。我通过完全禁用点击突出显示来"解决"该问题，如下所述：

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

当我们遇到此问题时，迈克尔的答案-webkit-backface-visibility: hidden;起作用了。我们在标记上添加了translateZ(0px)，以防止iOS 3.1.3和更早的IFRAME边界错误，它会导致动画闪烁。在每个元素上添加-webkit-backface-visibility: hidden;，我们可以使闪烁变动画！救生员。

如果有人发现背面可见性不起作用，则可以查看动画元素上已经存在的属性。对于我们来说，我们发现在absolute或fixed位置的元素上的overflow-y: scroll在iOS上引起严重闪烁。

只需删除overflow-y: scroll即可对其进行修复。

相关讨论

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

我注意到，当我在div上处于悬停状态时，即使我没有附加任何CSS或JS，页面也会闪烁。也许这可以帮助别人。

相关讨论

即使我有-webkit-transform-style: preserve-3d;和-webkit-backface-visibility: hidden，闪烁仍在发生。

在我的情况下，原因是z-index。在活动元素上增加它确实有所帮助。

这是一个新的解决方案。我使用jQuery设置背景图像，但3D渲染技巧均无效。因此，我尝试使用类来定义属性。瞧！像黄油一样光滑。

这会导致闪烁：

1
$('#banner').css('backgroundImage', 'url("slide_1.jpg")';

而是：

1
$('#banner').attr('class', '.slide-1');

具有定义的类：

1
2
3
#banner { -webkit-transition: background-image .25s; }
.slide-1 { background-image: url("slide_1.jpg"); }
.slide-2 { background-image: url("slide_2.jpg"); }

我花了很多时间试图为Ember Animated Outlets，Phonegap和iOS设置找出此问题。

尽管很简单，但我必须为css动画中包含的每个顶级父元素添加背景。换句话说，请确保视图中没有任何元素没有背景。

我的设置是为每个模板设置，所有三个元素均分配有背景色：

更新2019

您只需将这些规则添加到使用了过渡的元素中，即可打开闪烁。

1
-webkit-transform: translate3d(0, 0, 0);

在Safarai为我工作

无需将过渡应用于"全部"，只需指定您真正需要的过渡即可。它消除了我案子上的闪烁。

我尝试了以上所有方法，但在Firefox和Chrome上仍然存在主要的闪烁问题。我已修复它，或者至少通过消除导致动画过程中许多重绘的框阴影变换，将其至少减小到了可接受的问题。我遵循了这一要求，并根据自己的需要进行了修改：

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

对我来说，通过将will-change: transform;删除到动画元素即可解决野生动物园中的闪烁问题。

我也可以通过向父级添加overflow: hidden;来解决此问题，但是与此同时，所有带有transform: translateZ()的元素都无效

我必须使用实际值(而不是0)：

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

例：

1
 

根据我的阅读，闪烁是由浏览器在硬件和软件渲染之间切换引起的。而且我认为浏览器制造商已经意识到可以使用" translate3d(0,0,0)"强制进行硬件渲染-因此他们现在可能会忽略这些假值。

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

无论如何，为我工作。

使用默认的Android网络浏览器执行幻灯片过渡时，我经历了闪烁。

我使用了以下过渡CSS：

1
2
-webkit-transition: all 2s;
-webkit-transform: translate(100%,0);

此线程中提到的任何变通办法都没有帮助解决该问题。
最后，我找到了解决方案。闪烁的来源是all关键字，它意味着执行所有可能的过渡。我将其更改为仅执行转换，此问题已解决：

1
2
-webkit-transition: -webkit-transform 2s;
-webkit-transform: translate(100%,0);

对我来说解决的是延迟对transform-translate CSS规则的分配。像这样：

HTML：

1
 

CSS：

1
2
3
4
5
6
7
.animate-this {
  &:not(.loading) {
    transform: -webkit-translate(50px);
    transform: translate(50px);
    transition: -webkit-transform 0.3s, transform 0.3s;
  }
}

JavaScript(jQuery)：

1
2
3
4
5
$(document).ready(function(){
  window.setTimeout(function(){
    $('.animate-this').removeClass('loading');
  }, 250);
});

…因为-webkit-backface-visibility: hidden;没有为我做任何事情。

因此，我找到了一个解决此问题的方法，使其他人无法正常工作。

CSS：

1
2
3
4
5
6
7
8
9
10
.ios-animation-fixer {
  position: fixed;
  width: 100%;
  height: 10px;
  top: -10px;
  background-color: green;
  z-index: 1;
  pointer-events: none;
  visibility: hidden;
}

HTML：

1
 

然后将动画元素的z-index设置为>1。这将以某种方式诱使iOS设备以不同的方式呈现动画，并避免出现我的场景中的闪烁。如果此解决方案无法完全解决，则调整z-index值可能会有所帮助。

试试这个解决方案。它对我在Phonegap + jQM 1.4.0中有效：

更改此

为此：

在此处阅读更多信息：http://www.fishycode.com/post/40863390300/fixing-jquery-mobiles-none-transition-flicker-in