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

Jee*_*one 10 javascript css safari video transition

我们在网站上有一系列图像/视频,使用javascript和CSS过渡定期换出.这些工作可以很好地处理图像到图像或视频到图像,但是当从图像到视频的转换时,视频会在开始播放之前抖动.

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

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

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

Vas*_*its 2

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

众所周知,Chrome(即使在你的情况下有效)在这件事上表现不佳,即使它可以解决 Safari 中的问题,它也可能在 Chrome 中产生问题(无论如何你都必须测试它):

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

我的建议是首先尝试更快的转换。这解决了我之前类似案例中的问题。

尽管如此,我还是想参考以下问题(以及公认的答案),以便帮助您了解触发硬件加速的最佳实践(如果您决定采取该路径):

提高 CSS3 过渡性能