276586 2024-07-14 01:41:31 -0700 Image created with JavaScript will initially ignore `sizes` if it appears after `srcset` 2024-07-22 03:24:43 -0700 1 1 1 Unclassified WebKit Images Safari 17 Unspecified Unspecified NEW https://bugs.webkit.org/show_bug.cgi?id=190031 InRadar P2 Normal --- 1 oliverjash webkit-unassigned ahmad.saleem792 cdumez maggotfish m.goleb+bugzilla rniwa sabouhallawa webkit-bug-importer yoav oldest_to_newest 2046163 0 oliverjash 2024-07-14 01:41:31 -0700 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. 2046180 1 oliverjash 2024-07-14 10:10:36 -0700 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? 2046245 2 yoav 2024-07-15 05:35:22 -0700 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 2047386 3 webkit-bug-importer 2024-07-21 01:42:13 -0700 <rdar://problem/132181260> 2047473 4 yoav 2024-07-22 03:24:43 -0700 https://github.com/WebKit/WebKit/pull/31055 addresses this