jQuery CSS3 transition/transform/translate3d 在过渡的第一个或最后一个“帧”（在 iPad 上）导致严重闪烁
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5814101/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 transition/transform/translate3d causes severe flicker on first or last "frame" of the transition (on an iPad)
提问by mattstuehler
All,
全部，
I'm working on a web app specifically for the iPad, and I'm using a CSS3 transition to animate a div (move it from left to right).
我正在开发一个专门用于 iPad 的网络应用程序，我正在使用 CSS3 过渡来为 div 设置动画（从左到右移动它）。
My class looks like this:
我的课是这样的：
.mover {
-webkit-transition:all 0.4s ease-in-out;
}
When the user clicks a button, I do this:
当用户单击按钮时，我会这样做：
var s = "translate3d(" + newPosition + "px, 0, 0)";
$('.mover ').css('-webkit-transform', s);
This works great EXCEPTthe FIRSTtime the user triggers the transition; the first time, there's a very noticeable flicker.
这非常有效，除了用户第一次触发转换；第一次，有非常明显的闪烁。
I realize I don't need to use translate3d since I'm only moving the div left and right, but, as I understand it, this forces the iPad to use GPU acceleration. (Is this correct?)
我意识到我不需要使用 translate3d，因为我只是左右移动 div，但是，据我所知，这迫使 iPad 使用 GPU 加速。（这样对吗？）
Many thanks in advance!
提前谢谢了！
[UPDATE]
[更新]
I was a little ambiguous about the "flicker". In short - I've been experimenting with a wide variety of CSS3 transitions (specifically on the iPad), and consistently - I've noticed a distinct flicker at the startor endof the transition.
我对“闪烁”有点含糊不清。简而言之 - 我一直在尝试各种 CSS3 过渡（特别是在 iPad 上），并且始终如一 - 我注意到过渡开始或结束时有明显的闪烁。
In other words, the transitions themselves are VERY smooth. However, depending on the precise settings, there's a noticeable flicker just before the transition begins or ends.
换句话说，过渡本身非常平滑。但是，根据精确的设置，在过渡开始或结束之前会有明显的闪烁。
Here's another example: I have three photos (PNGs) stacked on top of each other.
这是另一个示例：我将三张照片 (PNG) 叠在一起。
The bottom PNG has opacity=1.0, the top 2 have opacity=0.0. Using -webkit-keyframes, I'm able to get silky smooth transitions as the photos fade in and out. When the animation ends, the bottom photo ends at opacity=1.0, the top two at opacity=0.0. (That should be their final state).
底部 PNG 的不透明度 = 1.0，顶部 2 的不透明度 = 0.0。使用 -webkit-keyframes，当照片淡入淡出时，我能够获得如丝般平滑的过渡。当动画结束时，底部照片以 opacity=1.0 结束，前两张以 opacity=0.0 结束。（那应该是他们的最终状态）。
However, just as the animation ends, the bottom photo flickers. It's as though the browser is forces to redraw/repaint the screen, and that takes a few fractions of a second.
然而，就在动画结束时，底部照片闪烁。就好像浏览器被迫重新绘制/重新绘制屏幕一样，这需要几分之一秒。
It's bad enough to spoil the effect, and render then transitions unuseable. (On my iMac it is almost, but not quite, imperceptible. On the iPad, it's unmissable).
破坏效果并渲染然后过渡无法使用已经很糟糕了。（在我的 iMac 上，它几乎无法察觉，但并非完全无法察觉。在 iPad 上，这是不容错过的）。
采纳答案by mattstuehler
All,
全部，
I'm not positivethat this is the answer (especially because the flicker itself seems a little unpredictable), but anecdotally, this seems to get rid of it...
我不积极，这是答案（尤其是因为闪烁本身似乎有点不可预知的），但有传言称，这似乎摆脱它......
Anyway, here's what I was doing:
无论如何，这就是我在做什么：
.mover {
-webkit-transition:all 0.4s ease-in-out;
}
var s = "translate3d(" + newPosition + "px, 0, 0)";
$('.mover ').css('-webkit-transform', s);
Often, the FIRSTtime this was executed, I'd see a flicker before the animation begins. Subsequent calls would animate smoothly.
通常，第一次执行时，我会在动画开始之前看到闪烁。后续调用将平滑动画。
What I inferred was that, if the 3d coordinates were not set before calling the animation, you'd see a flicker. The first call sets those coordinates, so subsequent calls would animate smoothly.
我的推断是，如果在调用动画之前未设置 3d 坐标，您会看到闪烁。第一个调用设置这些坐标，因此后续调用将平滑动画。
So - I tried setting the 3d coordinates of the div first (essentially, when I'm first building the screen - i.e., initialization), before any animations are ever triggered.
所以 - 在任何动画被触发之前，我首先尝试设置 div 的 3d 坐标（基本上，当我第一次构建屏幕时 - 即初始化）。
So, thereafter - when a 3d animation is called for, the div/element's starting 3d coordinates have already been established.
因此，此后 - 当调用 3d 动画时，div/元素的起始 3d 坐标已经建立。
That seems to eliminate the flickering.
这似乎消除了闪烁。
As I said - I'm not sure if this is a robust, reliable fix, but it certainly has eliminated the problem in my current projects.
正如我所说 - 我不确定这是否是一个强大、可靠的修复程序，但它肯定已经消除了我当前项目中的问题。
Good luck.
祝你好运。
回答by Bob Vork
I was dealing with the same issue, and I found the solution here on SO: iPhone WebKit CSS animations cause flicker
我正在处理同样的问题，我在 SO 上找到了解决方案：iPhone WebKit CSS animations cause flicker
It's as simple as adding
就像添加一样简单
-webkit-backface-visibility: hidden;
and possibly
并且可能
-webkit-perspective: 1000;
To each animated object. It worked for me, hope this helps for you too
到每个动画对象。它对我有用，希望这对你也有帮助
回答by xiatica
We solved many flickering and font problems by fixing the viewport.
我们通过修复视口解决了许多闪烁和字体问题。
Previously we had content going off the page (a sliding div) and the device seemed to go into conniptions when the viewport wasn't fixed, having to process data off the screen in combination with the zoom-a-bility of the displayed content.
以前，我们让内容离开页面（一个滑动 div），当视口未固定时，设备似乎陷入混乱，必须结合显示内容的缩放能力处理屏幕外的数据。
This tag in the head solved our problems.
头部的这个标签解决了我们的问题。
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
回答by c-smile
Try
尝试
.mover {
position:absolute;
-webkit-transition:-webkit-transform 0.4s ease-in-out;
}
but, as I understand it, this forces the iPad to use GPU acceleration
但是，据我所知，这迫使 iPad 使用 GPU 加速
Both translate() and translate3d() create stacking context and may use layers - texture buffers in terms of GPU. So I don't think that they really make any difference in terms of acceleration.
translate() 和 translate3d() 都创建堆叠上下文，并且可以使用层 - 就 GPU 而言的纹理缓冲区。所以我不认为它们在加速方面真的有什么不同。
回答by Jesse
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. i can't see your html but this might help
我注意到当我在 div 上有一个悬停状态时，页面会闪烁，即使我没有附加任何 css 或 js。我看不到你的 html 但这可能会有所帮助
回答by WebsterDevelopine
I had this problem and tried all of the recommendations above. I just discovered that the z-index of the faces can cause the issue.
我遇到了这个问题并尝试了上述所有建议。我刚刚发现人脸的 z-index 会导致这个问题。
I had 3 panes 1 middle(flat) boths sides on angle like this \_/ - the middle one was flickering while the z-index was above or the same as the sides. Moving it to the bottom fixed the flickering entirely.
我有 3 个窗格，1 个中间（平坦）两侧的角度像这样 \_/ - 当 z-index 高于或与两侧相同时，中间的一个正在闪烁。将其移动到底部完全固定闪烁。
Hope that helps.
希望有帮助。
