在Safari中，从静态图像到视频的CSS转换很不稳定

CSS transition from static image to video is jerky in Safari

本文关键字：视频 CSS 转换 不稳定 图像 Safari 静态      更新时间：2023-09-26

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

这只发生在Safari 9/10中。

网址为http://thealthanicollection.com/。这个视频在左上角，并定期更换。

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

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

众所周知，Chrome(即使在你的情况下工作)在这个问题上没有做得很好，即使它可以解决Safari中的问题，它也可能在Chrome中产生问题(你必须测试它):

  • 为什么一些CSS属性的转换缓慢且不流畅
  • CSS3在Firefox、Chrome和IE中的转换差异
  • http://www.binarymoon.co.uk/2014/02/fixing-css-transitions-in-google-chrome/

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

我的建议是先尝试更快的转换。这解决了我以前遇到的类似问题。

尽管如此，我还是想参考以下SO问题(好吧，公认的答案)，以帮助你在触发硬件加速的最佳实践，如果你决定采取这条路:

提高CSS3的过渡性能

相关文章：