86

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

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

'-webkit-transition': 'none'

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

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

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

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

4

21 回答 21

128

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

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
于 2010-08-11T18:49:44.957 回答
39

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

#game {
  -webkit-backface-visibility: hidden;
}
于 2010-07-28T01:42:26.613 回答
19 
body {-webkit-transform:translate3d(0,0,0);}
于 2010-10-14T14:33:23.097 回答
12

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

于 2012-07-02T11:21:06.567 回答
11

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

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

-webkit-tap-highlight-color: rgba(0,0,0,0);
于 2013-04-29T15:07:38.880 回答
5

-webkit-backface-visibility: hidden;当我们遇到这个问题时，迈克尔的回答奏效了。我们translateZ(0px)在<body>标签上添加了防止 iOS 3.1.3 和更早版本的IFRAME边界错误，它会导致动画闪烁。添加-webkit-backface-visibility: hidden;到我们动画的每个元素修复了闪烁！救生员。

于 2010-09-11T03:38:36.023 回答
3 
div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

i noticed when i had a hover state on a div the page would flicker, even if i did not have any css or js attached to it. maybe this helps someone else.

于 2013-04-08T23:05:08.740 回答
3

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

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

于 2014-07-08T01:53:12.947 回答
1

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

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

于 2015-11-17T14:05:14.837 回答
1

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

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

于 2019-08-08T19:36:38.723 回答
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"); }
于 2013-09-07T17:59:51.820 回答
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" />

在这里阅读更多：http ://www.fishycode.com/post/40863390300/fixing-jquery-mobiles-none-transition-flicker-in

于 2014-04-03T13:48:37.223 回答
0

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

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

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

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

于 2014-06-16T18:24:38.447 回答
0

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

于 2018-12-18T13:05:33.043 回答
0

多年来，我一直在尝试解决类似的问题，并且此线程中的评论对我来说是关键，所以我要为其他人强调它：

我实际上需要添加 -webkit-backface-visibility: hidden; 到父 div、动画 div 和动画 div 的子级。一旦我这样做了，它就完美地工作了。– mattstuehler 2013 年 3 月 12 日 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，但其中包含更多级别的元素，显然它们都需要处理以使白色闪光消失。从来没有弄清楚为什么它只发生在iOS webkit浏览器上，并且只有当board div被翻译超过一定程度时......

于 2022-03-01T16:07:53.813 回答
0

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

我使用了以下过渡 css：

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

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

-webkit-transition: -webkit-transform 2s;
-webkit-transform: translate(100%,0);
于 2018-01-16T12:52:35.620 回答
0

2019 年更新

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

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

在 Safari 上为我工作

于 2019-11-27T19:09:53.897 回答
0

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

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

于 2016-07-28T12:12:30.483 回答
0

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

于 2015-09-02T08:54:17.993 回答
0

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

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

于 2016-06-07T12:11:29.037 回答
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)”会强制硬件渲染——所以他们现在可能会忽略这些虚假值。

=> 使用实际值可能会导致事情“坚持”。

无论如何，为我工作。

于 2017-06-24T00:21:16.000 回答