iPhone WebKit CSS动画导致闪烁

83

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

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

'-webkit-transition': 'none'

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

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

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

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

— 杰克·查帕
source

126

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

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

— 韦斯·贝克
source

21

1000背后的魔力是什么？其他任何值（> 0）是否可以工作？

— cYrus

注意：这会使动画对Windows chrome v19上的鼠标事件无响应：在实践中添加该动画不会出现闪烁，但动画并不总是开始（在鼠标悬停时或以其他方式）

— skyline26年

1

注意：添加背面可见性将更改您的颜色渲染。这是打开和关闭背面可见性的示例：bit.ly/13ldbvY

— Tamik Soziev 2013年

3

尝试转换链接元素时，我遇到了文本闪烁的问题。更改背面可见性会更改抗锯齿，使字体真正变细。通过使用-webkit-font-smoothing修复：subpixel-antialiased;

— 2013年

1

@cYrus我想我们永远不会知道

— Denny

39

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

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

— 多诺霍
source

2

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

— cyrus

18

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

— 布赖恩·达斯托
source

这对我有用。.但是我必须将其应用到某个#wrapper元素上，因为在主体上应用会弄乱布局。

— adamJLev 2011年

如果有人想看到背面“ -webkit-backface-visibility：隐藏；” 没有用，但这是完美的。谢谢！

— Nachtgold

完善。-webkit-backface-visibility: hidden;导致任何比例转换变得模糊。body {-webkit-transform:translate3d(0,0,0);}工作了。

— 利亚姆

我正在尝试，但对我不起作用。这是一个代码段：codeply.com/go/g7Zp98paz5

— Fran_gg7 '16

1

这对我有用。就我而言，scale(1)引起了闪烁。非常感谢

— jansesun '18

12

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

— 约翰·德席尔瓦
source

我实际上需要添加-webkit-backface-visibility: hidden;到父div，动画div和动画div的子级中。一旦这样做，它就可以完美地工作了。

— mattstuehler 2013年

2

我认为也可以通过将其添加到父项来解决我的闪烁问题。它实际上是做什么的？

— chovy

不过，将其添加到父元素会撤消子元素上的“固定”位置：(

— 詹姆斯

11

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

事实证明，这是由iOS的实际功能“ tap Highlight”引起的，该功能由于某种原因在CSS动画完成后（即在实际点击之后）插入，并突出显示了整个菜单，而不仅仅是元素被窃听。我通过完全禁用自来水亮点“固定”的问题，如所描述这里：

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

— 弗雷斯卡马
source

5

-webkit-backface-visibility: hidden;当我们遇到这个问题时，迈克尔的答案起作用了。我们translateZ(0px)使用了<body>标签来防止iOS 3.1.3和更早版本的IFRAME边界错误，并且该错误会导致动画闪烁。在-webkit-backface-visibility: hidden;每个元素上添加动画效果，可以固定闪烁！救生员。

— 罗布·巴雷卡
source

3

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

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

— 杰西
source

对我来说，一个骗局。其他只有在过渡到位时才有意义。

— Nadav

3

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

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

— 肯德尔
source

删除overflow-y: scroll帮助我的情况。非常感谢！

— YemSalat 2015年

也可能是我的情况。但我无法删除此元素的绝对位置的overflow-y nore。任何的想法？

— Kobi Cohen

1

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

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

— 莫非斯
source

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"); }

— 马特瓦德
source

0

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

— 烤半
source

0

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

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

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

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

— 肯诺维克
source

0

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

— 西尔维斯特·露西亚（Sylvestre Lucia）
source

0

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

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

— d1ch0t0my
source

0

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

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

— 莫森·卡克比斯
source

0

我必须使用实际值（而不是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）”强制进行硬件渲染-因此他们现在可能会忽略这些假值。

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

无论如何，为我工作。

— 鲍勃
source

0

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

我使用了以下过渡CSS：

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

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

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

— 朱西德
source

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;没有为我做任何事情。

— 伍德罗茂
source

0

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

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值可能会有所帮助。

— 科林
source

0

更新2019

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

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

在Safarai为我工作

— 自由式09
source