Created attachment 356003 [details] html file for test Maybe related to #159484 When the html file join to this ticket is loaded in a small viewport (400px for example), any image from first <source> should not be loaded. Currently on 400px wide viewport `https://dummyimage.com/512x450/100` (`https://dummyimage.com/1024x900/300` on retina screen) is loaded uselessly in addition to the one needed (`https://dummyimage.com/640x900/030` or `https://dummyimage.com/1280x1800/060` for retina screen). ``` <picture> <source media="(min-width: 40rem)" srcset=" https://dummyimage.com/256x225/100 256w, https://dummyimage.com/512x450/100 512w, https://dummyimage.com/1024x900/300 1024w, https://dummyimage.com/2048x1800/600 2048w, https://dummyimage.com/4096x3600/900 4096w" sizes="100vw"> <img src="https://dummyimage.com/640x900/006" srcset=" https://dummyimage.com/640x900/030 640w, https://dummyimage.com/1280x1800/060 1280w" sizes="100vw" alt=""> </picture> ```
Looks like a preloader problem with media queries using `rem` or `em`. If the mq uses absolute `px` this problem does not appear. * First mq is always selected when only relative units are available, adjusted later by the loader (2nd request) * First mq with absolute unites will be selected, adjusted later by the loader
<rdar://problem/46347476>