Animated webp shows all frames only on mobile browsers (Chrome, Safari)

Question

[Deployed via nextjs 13 & vercel]

I have an animated webp (great reduction in size relative to the APNG). It's supposed to show only one frame at a time, out of a series of frames used to animate it.

The animated webp I've put on my site is rendering as expected (one frame at a time) on desktop browsers, however on mobile safari & chrome, the animated webp will show all frames without removing the previous frame from view, creating an undesired effect.

How can I prevent the webp from stacking frames on mobile browsers?

Answer 1

It sounds like a browser bug on mobile Safari and Chrome. I would recommend a few things to try:

Use separate webp files for each frame instead of an animated webp. This will ensure each frame is rendered correctly on all browsers.

Add a playsinline attribute to your element to force inline playback:

<img src="animation.webp" playsinline>

As a last resort, serve a fallback video element for mobile browsers that have issues with animated webp:

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