Transparency Issue with WebM Videos on Android Chrome Browser
The transparent WebM video, which appeared crisp on the Chrome browser on PC, shows jagged edges on the Android Chrome browser. Specifically, the edges of fine details like animal fur appear darker, almost grayish, on the smartphone. The video was encoded using the VP9 codec. The left side shows how the WebM video appears on PC, while the right side illustrates its appearance on smartphones. Does anyone know a solution to this issue?
I tried increasing the bitrate to improve the video quality and also experimented with changing the color space, but it didn't improve at all. Thinking it might be a browser rendering issue, I adjusted brightness, saturation, and other properties using CSS, but the jagged edges remained grayish and unaffected.
I want to be able to play transparent videos with clean edges on mobile browsers. Since GIFs and APNGs tend to become too large in size, I prefer not to use them much. If anyone knows a solution, please share it.
This was due to a Chrome Android bug, where alpha was being premultiplied twice.
https://issues.chromium.org/issues/349610465 - the issue has been fixed in main, but at the time of writing it hasn't landed in stable.