NEW276586
Image created with JavaScript will initially ignore `sizes` if it appears after `srcset` 
https://bugs.webkit.org/show_bug.cgi?id=276586
Summary Image created with JavaScript will initially ignore `sizes` if it appears aft...
Oliver Joseph Ash
Reported 2024-07-14 01:41:31 PDT
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
Comment 1 2024-07-14 10:10:36 PDT
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
Comment 2 2024-07-15 05:35:22 PDT
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
Comment 3 2024-07-21 01:42:13 PDT
<rdar://problem/132181260>
Yoav Weiss
Comment 4 2024-07-22 03:24:43 PDT
https://github.com/WebKit/WebKit/pull/31055 addresses this
Note You need to log in before you can comment on or make changes to this bug.