CSS3过渡/变换/ translate3d导致对第一或最后的过渡“帧”闪烁严重（在iPad）

所有，CSS3过渡/变换/ translate3d导致对第一或最后的过渡“帧”闪烁严重（在iPad）

我正在专为iPad一个web应用程序，并且我使用CSS3转换为div动画（从左向右移动它）。

我的类看起来是这样的：

.mover { 
    -webkit-transition:all 0.4s ease-in-out; 
}

当用户点击一个按钮，我这样做：

var s = "translate3d(" + newPosition + "px, 0, 0)"; 
$('.mover ').css('-webkit-transform', s);

这个伟大的工程EXCEPT的FIRST一次用户触发过渡;第一次，有一个非常明显的闪烁。

我意识到我不需要使用translate3d，因为我只是左右移动div，但据我所知，这迫使iPad使用GPU加速。（这是正确的吗？）

非常感谢提前！

[更新]

我却有点含糊有关 “忽悠”。简而言之 - 我一直在尝试各种各样的CSS3转换（特别是在iPad上），并且始终如一 - 我注意到在转换的开始或结束明显闪烁。

换句话说，转换本身非常平滑。但是，根据精确的设置，在转换开始或结束之前会有明显的闪烁。

下面是另一个例子：我有三张照片（PNG）堆叠在一起。

底部的PNG具有不透明度= 1.0，顶部2具有不透明度= 0.0。使用-webkit关键帧，当照片淡入淡出时，我可以获得如丝般的平滑过渡。当动画结束时，底部照片结束于不透明度= 1.0，不透明度= 0.0的前两个。（这应该是他们的最终状态）。

但是，就像动画结束一样，底部照片闪烁。就好像浏览器正在强制重画/重画屏幕，而这需要几分之一秒。

糟糕的效果，并呈现然后转换不可用。（在我的iMac上，它几乎是，但不是很明显，在iPad上，这是不容错过的）。

来源

2011-04-28 mattstuehler

所有，

我不积极，这是答案（尤其是因为闪烁本身似乎有点不可预知的），但传言，这似乎摆脱它...

总之，这里的我在做什么：

.mover { 
    -webkit-transition:all 0.4s ease-in-out; 
} 

var s = "translate3d(" + newPosition + "px, 0, 0)"; 
$('.mover ').css('-webkit-transform', s);

通常，这个被执行的时候，我会在动画开始之前看到一个闪烁。随后的通话将顺利进行。

我推断出的是，如果在调用动画之前未设置3d坐标，则会看到闪烁。第一次调用设置这些坐标，因此后续调用将平稳地进行动画。

所以 - 在任何动画被触发之前，我尝试先设置div的三维坐标（基本上，当我第一次构建屏幕时 - 即初始化）。

因此，此后 - 当要求3D动画时，div /元素的起始3d坐标已经建立。

这似乎消除了闪烁。

正如我所说 - 我不确定这是否是一个稳健可靠的解决方案，但它肯定已经消除了当前项目中的问题。

祝你好运。

来源

2012-02-28 16:53:18 mattstuehler

可以确认这是至少在Safari 6.0.5中的错误 – lol 2013-11-27 13:49:00

尝试

.mover { 
    position:absolute; 
    -webkit-transition:-webkit-transform 0.4s ease-in-out; 
}

，但是，据我了解，这迫使iPad上使用GPU加速

同时平移（）和translate3d（）创建堆叠上下文并可以使用层 - 根据GPU的纹理缓冲区。所以我认为他们在加速方面确实没有什么不同。

来源

2011-04-28 06:06:21

我正在处理同样的问题，我找到了解决办法在这里这样：iPhone WebKit CSS animations cause flicker

这是因为加入

-webkit-backface-visibility: hidden;

，并可能

-webkit-perspective: 1000;

对每一个动画一样简单目的。它为我工作，希望这对你也有帮助

来源

2011-05-05 09:41:44

只添加'-webkit-perspective：1000;'为我修好了！ – 2011-11-05 21:16:50

该解决方案也在[这里描述]（http://davidwalsh.name/translate3d）。 – 2013-01-10 08:12:27

这确实将问题解决得非常严重。我将透视属性添加到包含动画对象的整个父元素。有效。当闪烁停止时， – Rohitink 2013-12-18 20:41:30

我们通过修复视口解决了许多闪烁和字体问题。

以前，我们的内容离开了页面（滑动div），当视口不固定时，设备似乎进入了隐藏状态，不得不在屏幕上处理数据，并结合缩放可用性显示的内容。

这个标签解决了我们的问题。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

来源

2011-06-24 03:22:26 xiatica

+1。但是分号[有点不对]（https://developer.mozilla.org/en/Mobile/Viewport_meta_tag/），你应该使用[“逗号分隔列表”]（http://developer.apple.com /library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/html/const/viewport）。 – Wolfram 2012-07-31 08:56:54

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

我注意到，当我在一个div的页面会闪烁有悬停状态，即使我没有附带任何CSS或JS。我看不到你的HTML，但这可能有帮助

来源

2013-04-08 23:07:03 Jesse

我有这个问题，并尝试了上面的所有建议。我刚发现脸部的z-索引可能导致问题。

我有3个窗格1中间（平坦）两侧在这样的角度\ \/- 中间的一个闪烁，而Z-索引是高于或相同的两侧。将它移动到底部可以完全固定闪烁。

希望有所帮助。

来源

2013-11-16 07:24:02 WebsterDevelopine

CSS3过渡/变换/ translate3d导致对第一或最后的过渡“帧”闪烁严重（在iPad）

回答

相关问题