动画 webp 仅在移动浏览器（Chrome、Safari）上显示所有帧

Question

[通过 nextjs 13 和 vercel 部署]

我有一个动画 webp（相对于 APNG 来说尺寸大大减小）。 它应该一次仅显示用于为其设置动画的一系列帧中的一帧。

我在网站上放置的动画 webp 在桌面浏览器上按预期呈现（一次一帧），但是在移动 safari 和 chrome 上，动画 webp 将显示所有帧，而不会从视图中删除前一帧，从而创建一个不良效果。

有人知道如何防止webp在移动浏览器上堆叠框架吗？

非常感谢🤙

Answer 1

这听起来像是移动 Safari 和 Chrome 上的浏览器错误。我会推荐一些可以尝试的东西：

为每个帧使用单独的 webp 文件而不是动画 webp。这将确保每个帧在所有浏览器上正确呈现。

向元素添加playsinline 属性以强制内联播放：

<img src="animation.webp" playsinline>

作为最后的手段，为存在动画 webp 问题的移动浏览器提供后备视频元素：

 <img src="animation.webp" alt="Fallback for webp">
</video>

希望这有帮助！如果您还有其他问题，请告诉我。