Bug 192147 – Multiple Picture Sources Downloading width media-query

• Status: NEW
• Component: Images

[Yvain Liechti]

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>
```

[Colin Bendell]

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

[Radar WebKit Bug Importer]

<rdar://problem/46347476>