从静态图像到视频的CSS过渡在Safari中是不稳定的

时间:2016-11-09 17:18:24

标签: javascript css video safari transition

我们在网站上有一系列图像/视频,使用javascript和CSS过渡定期换出。这些可以实现精细的图像到图像或视频到图像,但是当从图像到视频的转换时,视频会在开始播放之前抖动。

这仅发生在Safari 9/10中。 Chrome很好。

网站位于http://thealthanicollection.com/。这些视频位于左上角,并定期更换。

有人知道这个问题吗?可以在这里触发硬件加速帮助吗?

1 个答案:

答案 0 :(得分:2)

触发硬件加速理论上可以解决问题,但这可能会给你带来其他问题。

众所周知,Chrome(即使在你的情况下工作)在这件事上做得不好,甚至可以解决Safari中的问题,它可能会在Chrome中产生问题(无论如何你必须测试它) ):

但请先测试一下,因为我的资源比你的问题还要老:)

我的建议是首先尝试更快的过渡。这在以前的类似案例中解决了我的问题。

尽管如此我想提及以下SO问题(以及接受的答案),以便在您决定采用这条路径时帮助您了解触发硬件加速的最佳做法:

Improving CSS3 transition performance