Bug 231150

Summary: Safari complains about invalid `imagesrcset` value in <link rel=preload> where Chrome doesn't
Product: WebKit Reporter: Chris J. Shull <chrisjshull>
Component: Page LoadingAssignee: Chris Dumez <cdumez>
Status: RESOLVED FIXED    
Severity: Normal CC: ahmad.saleem792, anthony.pezzolla, beidson, bfulgham, eivindml, karlcow, kevin_neal, koivisto, rbuis, rik, sabouhallawa, simon.fraser, steven, webkit-bug-importer, webkit
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari Technology Preview   
Hardware: Mac (Intel)   
OS: macOS 11   
See Also: https://bugs.webkit.org/show_bug.cgi?id=245415
https://bugs.webkit.org/show_bug.cgi?id=192950
https://bugs.webkit.org/show_bug.cgi?id=198533
https://bugs.webkit.org/show_bug.cgi?id=198960
Attachments:
Description Flags
Link preload responsive images experimental feature none

Description Chris J. Shull 2021-10-03 17:48:19 PDT 
See Console for https://recipes.twospoons.us/recipes/Smoked_Chicken

    <link rel="preload" as="image" imagesrcset="../photos/smoked_chicken.256.jpg?526d5 256w, ../photos/smoked_chicken.512.jpg?526d5 512w, ../photos/smoked_chicken.768.jpg?526d5 768w, ../photos/smoked_chicken.1024.jpg?526d5 1024w, ../photos/smoked_chicken.1280.jpg?526d5 1280w, ../photos/smoked_chicken.1536.jpg?526d5 1536w, ../photos/smoked_chicken.1792.jpg?526d5 1792w, ../photos/smoked_chicken.2048.jpg?526d5 2048w, ../photos/smoked_chicken.2304.jpg?526d5 2304w, ../photos/smoked_chicken.2560.jpg?526d5 2560w, ../photos/smoked_chicken.2816.jpg?526d5 2816w, ../photos/smoked_chicken.3072.jpg?526d5 3072w, ../photos/smoked_chicken.3264.jpg?526d5 3264w" imagesizes="(max-width: 700px) 100vw, 700px">

FWIW, this works fine in Chrome.
Comment 1 Kevin Neal 2021-10-05 09:53:29 PDT 
Thanks for filing. The appropriate engineers have been notified.
Comment 2 Radar WebKit Bug Importer 2021-10-05 09:53:39 PDT 
<rdar://problem/83891023>
Comment 3 Tim 2022-12-19 07:29:12 PST 
Created attachment 464102 [details]
Link preload responsive images experimental feature

It seems from Safari 15.3 onwards, you can enable the correct behaviour via an Experimental Features flag.

Hopefully this will be enabled by default in an upcoming version. Until then it will expect a `href` attribute on a rel="preload" as="image" link tag and throw an error if that does not exist.
Comment 4 styfle 2023-04-24 06:08:49 PDT 
I believe this bug causes Safari to preload the wrong image since link.href refers to the img.src but it should use link.imagesrcset when available to match the img.srcset and fetch the correct image.

When can we expect the fix to ship unflagged?
Comment 5 Ahmad Saleem 2023-05-21 17:27:57 PDT 
(In reply to styfle from comment #4)
> I believe this bug causes Safari to preload the wrong image since link.href
> refers to the img.src but it should use link.imagesrcset when available to
> match the img.srcset and fetch the correct image.
> 
> When can we expect the fix to ship unflagged?

It is currently as 'testable':

https://github.com/WebKit/WebKit/blob/597aa395dcdcdb2c1c48069f450f7419a30df72d/Source/WTF/Scripts/Preferences/UnifiedWebPreferences.yaml#L3735

You can get idea on how flag works:

https://github.com/WebKit/WebKit/blob/597aa395dcdcdb2c1c48069f450f7419a30df72d/Source/WTF/Scripts/Preferences/UnifiedWebPreferences.yaml#L27
Comment 6 antwon 2023-06-22 09:03:02 PDT 
Any updates on when this will ship unflagged?
Comment 7 Anthony Ricaud 2023-07-15 01:26:30 PDT 
Seems like this was implemented via bug 192950, bug 198533 and bug 198960.

Rob: Any plans to ship this?
Comment 8 Brent Fulgham 2023-08-08 15:21:01 PDT 
It looks like `wpt /preload/dynamic-adding-preload-imagesrcset.html` shows this works properly when activated.
Comment 9 Chris Dumez 2023-08-08 16:48:13 PDT 
Pull request: https://github.com/WebKit/WebKit/pull/16499
Comment 10 EWS 2023-08-10 15:43:22 PDT 
Committed 266787@main (a32d1a3606d7): <https://commits.webkit.org/266787@main>

Reviewed commits have been landed. Closing PR #16499 and removing active labels.