1

[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?

starball
  • 20,030
  • 7
  • 43
  • 238
Kenzo
  • 307
  • 2
  • 11

1 Answers1

-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>
Adrian Mole
  • 49,934
  • 160
  • 51
  • 83
Mukilan
  • 1
  • 1