CODEWITHSUNDEEP
iossafariwebp
TheNightwalker
TheNightwalker

Reputation: 671

Animated webp frames get cropped by Safari (seen on iOS 14.x 15.x 16.x)

We were really happy when we saw that Safari was finally able to display the much-needed download-time-saving webp images. As of iOS 14.7 Safari seems to be fine with static webps. But when it comes to animated webps, our tests showed that Safari has a problem. Not all but some frames in our animated webps get cropped horizontally with almost half of the image gone which makes the app look glitchy.

In another case where each frame had transparent pixels Safari was showing new frames without clearing the previous frames. The result was a mess where every frame was layered and visible on top of another.

With an educated guess we presume that the problem needs some bugfix within Safari that will hopefully come in the future. Yet, if anyone knows a quick-fix, please share.

Note: Our tests showed that all the other major browsers are perfectly fine with the animated webps, playing smooth and nice without any issues.

Note: As of 2024 WEBP format is greatly valuable because it offers a high quality/size ratio (way better than GIF), and you have the freedom of setting a different duration for each frame. Since webps can do what no other can do, we are currently in a time period where one does not have the option to choose another format as a simple fallback (again as of 2024).

UPDATE: The problem seems to persist in iOS 15.x and 16.x

NOTE: Until this bug is fixed, it looks like the best way to offer high quality animation while keeping the file size compact is by creating avif or webp sprite sheets (long images that contain all the frames of your animation) and playing them via css steps() function, preferably with jump-none using transform translateX() or translateY(), of course, as they are placed in a container div whose overflow is set to hidden and whose width or height is set so that only one frame will show at a time.

NOTICE: This particular research has been performed during the development of the SPEAKWORLDLANGUAGES WEB APP

Upvotes: 3

Views: 607

Answers (0)

Related Questions