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个回答
1

我尝试了以上所有方法，但在Firefox和Chrome上仍然存在严重的闪烁问题。通过删除导致动画期间多次重绘的box-shadow转换，我解决了这个问题，或者至少大大减轻了它，使其成为可以接受的问题。我按照以下步骤进行修改以适应我的需求：

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

1
即使我使用了-webkit-transform-style: preserve-3d;和-webkit-backface-visibility: hidden，仍然出现了闪烁。
在我的情况下，原因是z-index。将其增加到活动元素上确实有所帮助。
1

我一直在试图解决类似的问题，而这个帖子中的评论对我来说是关键，所以我为其他人突出了它：

我实际上需要将-webkit-backface-visibility：hidden;添加到父div、动画div和动画div的子元素中。一旦我这样做了，它就完美地工作了。 - mattstuehler Mar 12, 2013 at 13:36

当我使用transform: translate3d重新定位一个div时，会出现可怕的白色闪烁：如果我将转换添加到transition-duration并将div移动得太远，则iOS webkit浏览器（仅限！）会闪烁白色屏幕。它让我发疯了，我查看了像这样的主题，寻找解决方案，同时尝试其他所有方法来制止它。这是最终奏效的方法：

#board_container * { /* asterisk(*) => board container and all its descendants */
    /* 
       attempt to stop iOS webkit flash when board is panned 
       to its edge... is it finally working?!?
    */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

我之前尝试将一些东西应用于我的#board div及其包装器#board_container，但其中还有几个层级的元素被包含在内，显然它们都需要处理才能消除白色闪烁。我错过的是CSS中的一个简单的星号：

#board_container * {

我从未弄清楚为什么它只会在iOS webkit浏览器上发生，并且只有当board div被翻译到一定程度时才会出现...

0

当我使用默认的Android网页浏览器执行幻灯片转换时，我遇到了闪烁的问题。

我使用了以下转换CSS：

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

这个线程中提到的所有解决方法都没有帮助解决问题。 最终我找到了解决方案。闪烁的源头是all关键字，它意味着执行所有可能的转换。我将其更改为仅执行转换，问题得到了解决：

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

这里有一个新的解决方案。我曾经使用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"); }
0

我花了很多时间尝试解决 Ember Animated Outlets, Phonegap 和 iOS 设置的问题。

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

我的设置是为每个模板设置以下内容，并为所有三个元素分配了背景颜色：

<header></header> <body class="content"></body> <footer></footer>

0
0

对我来说，在Safari上闪烁问题是通过从动画元素中删除will-change: transform;解决的。

此外，我也可以通过向父级添加overflow: hidden;来解决此问题，但是这样会使所有具有transform: translateZ()的元素无效。

0

不要将过渡效果应用于“全部”，只需指定您真正需要的那个。这样可以消除我遇到的闪烁问题。

0
对我有用的解决方法是延迟分配transform-translate CSS规则。类似这样：
HTML:
<div class="animate-this loading"></div>

CSS：

.animate-this {
  &:not(.loading) {
    transform: -webkit-translate(50px);
    transform: translate(50px);
    transition: -webkit-transform 0.3s, transform 0.3s;
  }
}

JavaScript（jQuery）：

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

因为-webkit-backface-visibility: hidden;对我来说没有任何作用。

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