Question

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

点击“立即播放”后，您将进入游戏状态。枪支将滚动进入。您可以上下滚动钱包和配件。你可以看到，当你放手时它们就会突然到位。就像快照发生一样，会发生闪烁。我正在使用的唯一webkit动画是：

'-webkit-transition': 'none'

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

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

我根据是否要让它进行动画选择第一个或第二个过渡，而变换是我移动物体的唯一方法。

但最大的问题是当您点击“匹配项目”时，请点击“再次播放”。你会看到枪支的动画效果，配件/钱包的整个背景都会变白。有人可以请你透露一些有关为什么会发生这种情况的见解吗？

Answer 1

我添加了-webkit-backface-visiblity，这大部分都有帮助，但重新加载页面后我仍然有一个初始闪烁。当我添加-webkit-perspective: 1000时，没有任何闪烁。

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

Answer 2

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

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

Answer 3

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

Answer 4

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

Answer 5

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

事实证明，这是由一个实际的iOS功能"tap highlight"引起的，这个功能在CSS动画结束后（即实际点击后的方式）因某种原因而被踢出，并突出显示了整个菜单只有被挖掘的元素。我通过完全禁用点击突出显示来“解决”问题，如here所述：

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

Answer 6

当我们遇到此问题时，

Michael's answer -webkit-backface-visibility: hidden;正常工作。我们的translateZ(0px)标记上有<body>，以防止iOS 3.1.3和更早版本IFRAME边界错误，并导致动画闪烁。将-webkit-backface-visibility: hidden;添加到我们动画的每个元素中可以修复闪烁！生命保护。

Answer 7

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

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

Answer 8

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

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

Answer 9

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

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

Answer 10

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

Answer 11

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

Answer 12

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

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

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

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

Answer 13

不要将过渡应用于“所有”，而只需指定您真正需要的过渡。它消除了我案件的闪烁。

Answer 14

我尝试了以上所有内容，但仍然在Firefox和Chrome上出现了重大的闪烁问题。我通过删除在动画期间导致许多重绘的盒阴影变换来修复它，或者至少将其大大减少到可接受的问题。我按照这个并根据我的需要进行了修改：

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

Answer 15

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

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

Answer 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，闪烁是由浏览器在硬件和软件渲染之间切换引起的。而且我认为浏览器制造商已经意识到了#a; translate3d（0,0,0）＆＃34;强制硬件渲染 - 所以他们现在可能会忽略这些假值。

=＆GT;使用实际值可能会导致事情变得“坚持”。

无论如何，为我工作。

Answer 17

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

我使用了以下过渡css：

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

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

{{1}}

Answer 18

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

HTML：

{
      "id": "5bb61dfd4d64747dd8d7d6cf",
      "date": "Sat Aug 11 2018 02:01:25 GMT+0000 (UTC)",
      "items": [
        {
          "item_id": "5bb619e44251009d72e458b9",
          "quantity": 4
        },
        {
          "item_id": "5bb619e4504f248e1be543d3",
          "quantity": 2
        },
        {
          "item_id": "5bb619e40fee29e3aaf09759",
          "quantity": 3
        }
      ]
    }

CSS：

<div class="animate-this loading"></div>

JavaScript（jQuery）：

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

…因为$(document).ready(function(){ window.setTimeout(function(){ $('.animate-this').removeClass('loading'); }, 250); });没为我做任何事情。

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

Answer 20

UPDATE 2019

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

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

在Safarai为我工作

iPhone WebKit CSS动画导致闪烁

20 个答案: