Bug 276586
| Summary: | Image created with JavaScript will initially ignore `sizes` if it appears after `srcset` | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Oliver Joseph Ash <oliverjash> |
| Component: | Images | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | ahmad.saleem792, cdumez, maggotfish, m.goleb+bugzilla, rniwa, sabouhallawa, webkit-bug-importer, yoav |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 17 | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
| See Also: | https://bugs.webkit.org/show_bug.cgi?id=190031 | ||
Oliver Joseph Ash
This is similar to https://bugs.webkit.org/show_bug.cgi?id=190031 but not exactly the same.
If `sizes` appears after `srcset`, Safari will initially download the largest entry in `srcset`—ignoring `sizes`—and then later download another entry from `srcset` following the definition of `sizes`.
Reduced test case: https://codepen.io/OliverJAsh/pen/PorqVGM
For comparison, here's another reduced test case where `sizes` appears before `srcset` instead of afterwards: https://codepen.io/OliverJAsh/pen/MWMwLjp. The issue does not reproduce here.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Oliver Joseph Ash
I just realised a similar bug also affects lazy loading.
If `loading = 'lazy'` is set after `src`/`srcset`, Safari downloads the image immediately i.e. it's not lazy loaded.
Reduced test case: https://codepen.io/OliverJAsh/pen/MWMwMKX
Should I file a separate bug?
Yoav Weiss
I believe that the root cause for all of these issues is that WebKit doesn't implement the "update the image data" [1] as written, and doesn't queue a microtask before performing step 9 of said algorithm.
As such, attributes that kick off an image load ("src" and "srcset") do that as soon as they are set, with the attributes already present on the element.
Back in the day when srcset was implemented (by 2014 me..), WebKit did not have a microtask abstraction, so we took this non-compliant path to get support in place. (the lack of microtask abstraction also added significant complexity to the <picture> implementation)
But it seems like nowadays WebKit does have a WebCore accessible microtask abstraction [2]. IIUC, that means that implementing the selection algorithm as specified Should Not Be That Hard™.
That would solve all 3 of these issues, and would potentially enable refactoring of the <picture> selection logic.
[1] https://html.spec.whatwg.org/multipage/images.html#update-the-image-data
[2] https://searchfox.org/wubkat/source/Source/WebCore/dom/EventLoop.h#115
Radar WebKit Bug Importer
<rdar://problem/132181260>
Yoav Weiss
https://github.com/WebKit/WebKit/pull/31055 addresses this