[iOS] Animated Stickers Cropped on Mac / iOS Browser

[Akz47]

Specifications
OS Version: iOS 14 / MacOS Big Sur's Safari
Device Manufacturer: Apple

Problem Description
We are facing a problem with animated stickers. Some stickers are partially cropped when viewing on iPad or Mac's Safari browser, as you can see from the stickers at the left section of the attached video. Some stickers work fine though.

It animates perfectly fine on iPhone / Android WhatsApp, as well as on Windows WhatsApp web / desktop. The problem happens when the recipient views it on Mac / iPad browser, regardless of whether the sender is sending the animated sticker from iOS / Android WhatsApp.

The WebP stickers meet WhatsApp's requirements (512x512 pixels, <500k), and the sticker sets install fine via our app into WhatsApp iOS / Android. The WebP animations are compiled from PNG images using Google's img2webp.

Is this due to some Mac / iPad browser issue, not properly supporting the WebP animations? Our suspicion is that in the animated image, certain frames only contain image data for a specific section of the image that changes. The browser overwrites the entire frame, rather than retaining existing pixels for areas where image data is not changed / specified within a frame. But we don't know how to fix this or tell the browser to render correctly.

We found a potentially similar issue reported here, but not sure if there is a fix:
https://bugs.webkit.org/show_bug.cgi?id=217897

Is there some workaround, i.e. a way to compile the WebP animations so that it renders properly on Mac / iOS Safari? Thank you.

[Update]
We found that we could reduce the artifacts by first converting the individual PNG frames into WebP format using cwebp, then only compile the WebP files into animated WebP. However, it is still not perfect, and only fixes some parts of the animation. For some files, conversion from PNG to WebP with "lossless" mode produces less artifacts, while others work better with "near_lossless".

animated-sticker-problem.mp4