Some valid WebPs are failing to decode

• Component: Images
• Status: RESOLVED MOVED

[Eric Portis]

Created attachment 442623 [details]
Screenshot of nike.com looking different in Chrome/Safari, because of this bug

Some valid WebPs are failing to decode in both macOS Big Sur 11.6 and iOS 15.

As of this writing, this is currently affecting the home page on https://nike.com, which uses a single-color powder-blue image to create a background behind the "Member Benefits" section. Screenshot attached. In Chrome, this background appears blue, as intended. In Safari, it appears gray (the CSS background color behind the image).

So far I’ve only seen single-color palletized lossless WebPs fail.

For example, here’s a WebP that fails:

https://o.img.rodeo/w_356,h_356,b_gray/_.webp (FAILS)

If I make it any smaller in either dimension, it works:

https://o.img.rodeo/w_355,h_356,b_gray/_.webp (WORKS)
https://o.img.rodeo/w_100,h_100,b_gray/_.webp (WORKS)
https://o.img.rodeo/w_10,h_10,b_gray/_.webp (WORKS)

All larger sizes fail, too:

https://o.img.rodeo/w_1000,h_1000,b_gray/_.webp (FAILS)

All of the images that fail in mac/iOS are successfully decoded by `dwebp` and display fine in Chrome.

Interestingly, the boundary between success and failure does not just depend on the pixel count. Changing the color changes the boundary:

https://o.img.rodeo/w_355,h_356,b_red/_.webp (FAILS)

The issue seems similar to, but distinct from, the issue behind this report https://bugs.webkit.org/show_bug.cgi?id=219977.

This is definitely an underlying OS library/frameworks issue, and I have already filed FB9671920 about it. As such, I expect this WebKit issue to be WONTFIXed, but I'm filing in order to facilitate public discussion on the issue and possible workarounds.

[Jen Simmons]

Radar

[Radar WebKit Bug Importer]

<rdar://problem/84728647>

[Alon Kochba]

Hey, I wanted to add some input from our experience at Wix, and inquire if this issue has enough data to identify and fix the problem.

After holding off serving WebP for webkit based browsers for a while, we recently decided to re-introduce WebP for these visitors, and already encountered several user complaints of images not loading on iOS.

All these images are single-color in the requested dimensions, and this can be easily recreated on any latest Safari/iOS browser. We have been instructing these users to replace the image with a solid color background, but it would be great to hear this is being addressed, even if it's an underlying OS issue.

Here is another example in addition to the ones provided by Eric above, let me know if you need more:

https://static.wixstatic.com/media/00c1aa_18dc3a5dcdda42168553b438c48b00b0~mv2.png/v1/fill/w_640,h_1980,al_c,usm_0.66_1.00_0.01/00c1aa_18dc3a5dcdda42168553b438c48b00b0~mv2.webp

p.s. someone added another example of an image that fails to load in https://bugs.webkit.org/show_bug.cgi?id=219977 which isn't a single color: https://bugs.webkit.org/attachment.cgi?id=454255

[Eric Portis]

Cloudinary has continued to receive customer support requests about this, as well.

Here's the latest image:

https://res.cloudinary.com/gantri/image/upload/q_auto:best/v1645130799/static-assets/meet-lines_wnuhoc.webp

[Sam Sneddon [:gsnedders]]

rdar://83794184

(see https://bugs.webkit.org/show_bug.cgi?id=232398)

[Sam Sneddon [:gsnedders]]

*** Bug 241758 has been marked as a duplicate of this bug. ***