iPhone WebKit CSS 动画导致闪烁答案

【问题标题】：iPhone WebKit CSS animations cause flickeriPhone WebKit CSS 动画导致闪烁
【发布时间】：2011-02-26 04:00:23
【问题描述】：

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

点击“立即玩”后，您将进入游戏。枪会滚动进来。您可以上下滚动钱包和配件。您可以看到，当您松开时，它们会卡入到位。就在那个瞬间发生时，会发生闪烁。我使用的唯一 webkit 动画是：

'-webkit-transition': 'none'

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

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

我会根据我是否想要动画来选择第一个或第二个过渡，而变换是我移动事物的唯一方式。

但最大的问题是当您单击“匹配项目”时，然后单击“再次播放”。您会看到，随着枪支的动画化，配饰/钱包的整个背景都变成了白色。有人可以告诉我为什么会发生这种情况吗？

【问题讨论】：

标签： iphone css animation webkit flicker

【解决方案1】：

试试这个，希望它会有所帮助：

#game {
  -webkit-backface-visibility: hidden;
}

【讨论】：

这在 Safari 默认情况下效果很好，但在独立模式下失败。你有什么想法吗？

【解决方案2】：

我添加了-webkit-backface-visiblity，这在很大程度上有所帮助，但在重新加载页面后我仍然有初始闪烁。当我添加-webkit-perspective: 1000时，没有任何闪烁。

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

【讨论】：

1000 背后的魔力是什么？任何其他值 (>0) 是否可行？
注意：这会使动画对 windows chrome v19 上的鼠标事件无响应：在实践中添加这个，没有闪烁，但动画并不总是开始（鼠标悬停或其他）
注意：添加背面可见性会改变您的颜色渲染。这是一个打开和关闭背面可见性的示例：bit.ly/13ldbvY
我在尝试转换链接元素时遇到了文本闪烁的问题。改变背面可见性改变了抗锯齿，使字体非常细。通过使用 -webkit-font-smoothing: subpixel-antialiased; 修复
@cYrus 我想我们永远不会知道

【解决方案3】：

Michael's answer -webkit-backface-visibility: hidden; 在我们遇到这个问题时起作用了。我们在<body> 标签上有translateZ(0px)，以防止iOS 3.1.3 和更早的IFRAME 边界错误，它会导致动画闪烁。将-webkit-backface-visibility: hidden; 添加到我们动画的每个元素中修复了闪烁！救生员。

【讨论】：

【解决方案4】：

body {-webkit-transform:translate3d(0,0,0);}

【讨论】：

这是为我做的。但是我不得不将它应用到 #wrapper 元素上，因为应用在 body 上会搞砸布局。
如果有人想看背面 "-webkit-backface-visibility: hidden;"没有用，但是这个是完美的。谢谢！
完美。 -webkit-backface-visibility: hidden; 导致任何比例转换变得模糊。 body {-webkit-transform:translate3d(0,0,0);} 辛苦了。
我正在尝试，但它不适合我。这是一个代码 sn-p：codeply.com/go/g7Zp98paz5
这对我有用。就我而言，scale(1) 导致了闪烁。非常感谢

【解决方案5】：

我的案例的实际答案在这里。有人接近：-webkit-backface-visibility: hidden;但真正的答案是 -webkit-backface-visibility: hidden;需要添加到 parent div。

【讨论】：

我实际上需要将-webkit-backface-visibility: hidden; 添加到父 div、动画 div 和动画 div 的子元素中。一旦我这样做了，它就完美无缺。
我认为通过将闪烁添加到父级也可以解决我的闪烁问题。它实际上是做什么的？
将其添加到父元素会撤消子元素上的“固定”位置:(

【解决方案6】：

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

我注意到当我在 div 上具有悬停状态时，页面会闪烁，即使我没有附加任何 css 或 js。也许这对其他人有帮助。

【讨论】：

对我来说，一个人做到了。其他的只有在转换到位时才相关。

【解决方案7】：

我也遇到了“闪烁”CSS 过渡的问题。有问题的动画是一个从屏幕外滑入的菜单，就在动画结束时，整个菜单闪烁/闪烁。

事实证明，这是由一个实际的 iOS 功能引起的，"tap highlight"，由于某种原因，它在 CSS 动画完成后启动（即在实际点击之后），并突出显示整个菜单，而不仅仅是被点击的元素。如here 所述，我通过完全禁用点击突出显示“修复”了该问题：

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

【讨论】：

【解决方案8】：

这是一个新的解决方案。我正在使用 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"); }

【讨论】：

【解决方案9】：

试试这个解决方案。它适用于 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" />

【讨论】：

【解决方案10】：

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

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

我对每个模板的设置都是这样，所有三个元素都分配了背景颜色：

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

【讨论】：

【解决方案11】：

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

只需删除 overflow-y: scroll 即可修复它。

【讨论】：

删除 overflow-y: scroll 帮助了我的情况。非常感谢！
这可能也是我的情况。但我不能删除溢出-y 也不能删除这个元素的绝对位置。有什么想法吗？

【解决方案12】：

不要将过渡应用于“全部”，只需指定您真正需要的过渡。它消除了我外壳上的闪烁。

【讨论】：

【解决方案13】：

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

就我而言，原因是z-index。在活动元素上增加它确实有帮助。

【讨论】：

【解决方案14】：

我尝试了以上所有方法，但在 Firefox 和 Chrome 上仍然存在严重的闪烁问题。我修复了它，或者至少通过删除在动画期间导致许多重绘的 box-shadow 变换将它大大减少到一个可接受的问题。我遵循了这一点并根据我的需要进行了修改：

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

【讨论】：

【解决方案15】：

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

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

【讨论】：

【解决方案16】：

我必须使用实际值（而不是 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>

From what I've read，闪烁是由于浏览器在硬件和软件渲染之间切换造成的。而且我认为浏览器制造商已经意识到“translate3d(0,0,0)”会强制硬件渲染——所以他们现在可能会忽略这些虚假值。

=> 使用实际值可能会导致事情“粘”起来。

无论如何，为我工作。

【讨论】：

【解决方案17】：

我在使用默认的 Android 网络浏览器执行幻灯片转换时遇到了闪烁。

我使用了以下过渡 css：

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

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

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

【讨论】：

【解决方案18】：

为我解决的问题是延迟了 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; 没有为我做任何任何事情。

【讨论】：

【解决方案19】：

因此，我找到了解决此问题的方法，但没有其他方法可以正常工作。

CSS：

.ios-animation-fixer {
  position: fixed;
  width: 100%;
  height: 10px;
  top: -10px;
  background-color: green;
  z-index: 1;
  pointer-events: none;
  visibility: hidden;
}

HTML：

<div class="ios-animation-fixer"></div>

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

【讨论】：

【解决方案20】：

2019 年更新

您可以通过简单地将这些规则添加到您使用过渡的元素来打开闪烁。

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

在 Safari 上为我工作

【讨论】：