| Summary: | 10bit AVIF images fail to render when decoding=async | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | buzz_thrill_0z | ||||||
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> | ||||||
| Status: | RESOLVED MOVED | ||||||||
| Severity: | Normal | CC: | bfulgham, greg323464, mmaxfield, sabouhallawa, simon.fraser, webkit-bug-importer, zalan | ||||||
| Priority: | P2 | Keywords: | InRadar | ||||||
| Version: | Safari 16 | ||||||||
| Hardware: | iPhone / iPad | ||||||||
| OS: | iOS 16 | ||||||||
| Attachments: |
|
||||||||
Created attachment 462740 [details]
test-10bit-large-AVIF-decoding-async
The attached test case does not show the AVIF image on macOS trunk WebKit. Removing decoding="async" from the <img> element does not fix the problem. The cause of this issue was outside of WebKit, so resolving as MOVED. <rdar://100800464> The fix to the underlying system component shipped in iOS 16.4.1 and macOS 13.3.1. |
Created attachment 462619 [details] A 10bit AVIF image 10bit AVIF images, that are rendered in a responsive container, fail to display when the img attribute decoding=async is set. Removing the attribute or changing it to read decoding=sync renders the image correctly. This appears to only affect larger images (approx 1920x1080) and currently only on iOS 16 on iPhone. The problem seems to be worse when using responsive css layout. Eg. img { height: auto; width: 100%; }. Rotating the phone makes the image display correctly. Sample HTML (image attached). <html> <head> <style> img { height: auto; width: 100%; } </style> </head> <body> <img src="red-green-blue-spheres-cornell-box.avif" decoding="async"> </body> </html>