192147 2018-11-29 06:37:56 -0800 Multiple Picture Sources Downloading width media-query 2026-03-30 01:01:04 -0700 1 1 1 Unclassified WebKit Images Safari 12 Mac macOS 10.13 NEW InRadar P2 Normal --- 1 ryuran webkit-unassigned colin koivisto simon.fraser webkit-bug-importer yoav oldest_to_newest 1482926 0 356003 ryuran 2018-11-29 06:37:56 -0800 Created attachment 356003 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> ``` 1482956 1 colin 2018-11-29 08:28:33 -0800 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 1483042 2 webkit-bug-importer 2018-11-29 11:01:28 -0800 <rdar://problem/46347476> 356003 2018-11-29 06:37:56 -0800 2018-11-29 06:37:56 -0800 html file for test index.html text/html 1621 ryuran PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgICA8bWV0YSBjaGFyc2V0 PSJVVEYtOCI+CiAgICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNl LXdpZHRoLCBpbml0aWFsLXNjYWxlPTEuMCI+CiAgICA8bWV0YSBodHRwLWVxdWl2PSJYLVVBLUNv bXBhdGlibGUiIGNvbnRlbnQ9ImllPWVkZ2UiPgogICAgPHRpdGxlPlNhZmFyaSBwaWN0dXJlIGJ1 ZzwvdGl0bGU+CiAgICA8c3R5bGU+CiAgICAgICAgYm9keSB7IG1hcmdpbjogMCB9CiAgICAgICAg cCxoMSB7IG1hcmdpbjogMXJlbSB9CiAgICAgICAgaW1nIHsgd2lkdGg6IDEwMCUgfQogICAgPC9z dHlsZT4KPC9oZWFkPgo8Ym9keT4KICAgIDxoMT48Y29kZT4mbHQ7cGljdHVyZSZndDs8L2NvZGU+ IGRvdWJsZSBkb3dubG9hZCBpbiBTYWZhcmk8L2gxPgogICAgPHA+V2hlbiB0aGlzIHBhZ2UgaXMg bG9hZGVkIGluIGEgc21hbGwgdmlld3BvcnQgKDQwMHB4IGZvciBleGFtcGxlKSwgYW55IGltYWdl IGZyb20gZmlyc3QgPGNvZGU+Jmx0O3NvdXJjZSZndDs8L2NvZGU+IHNob3VsZCBub3QgYmUgbG9h ZGVkLjwvcD4KICAgIDxwaWN0dXJlPgogICAgICAgIDxzb3VyY2UKICAgICAgICAgICAgbWVkaWE9 IihtaW4td2lkdGg6IDQwcmVtKSIKICAgICAgICAgICAgc3Jjc2V0PSIKICAgICAgICAgICAgICAg IGh0dHBzOi8vZHVtbXlpbWFnZS5jb20vMjU2eDIyNS8xMDAgMjU2dywKICAgICAgICAgICAgICAg IGh0dHBzOi8vZHVtbXlpbWFnZS5jb20vNTEyeDQ1MC8xMDAgNTEydywKICAgICAgICAgICAgICAg IGh0dHBzOi8vZHVtbXlpbWFnZS5jb20vMTAyNHg5MDAvMzAwIDEwMjR3LAogICAgICAgICAgICAg ICAgaHR0cHM6Ly9kdW1teWltYWdlLmNvbS8yMDQ4eDE4MDAvNjAwIDIwNDh3LAogICAgICAgICAg ICAgICAgaHR0cHM6Ly9kdW1teWltYWdlLmNvbS80MDk2eDM2MDAvOTAwIDQwOTZ3IgogICAgICAg ICAgICBzaXplcz0iMTAwdnciCiAgICAgICAgLz4KICAgICAgICA8aW1nCiAgICAgICAgICAgIHNy Yz0iaHR0cHM6Ly9kdW1teWltYWdlLmNvbS82NDB4OTAwLzAwNiIKICAgICAgICAgICAgc3Jjc2V0 PSIKICAgICAgICAgICAgICAgIGh0dHBzOi8vZHVtbXlpbWFnZS5jb20vNjQweDkwMC8wMzAgNjQw dywKICAgICAgICAgICAgICAgIGh0dHBzOi8vZHVtbXlpbWFnZS5jb20vMTI4MHgxODAwLzA2MCAx MjgwdyIKICAgICAgICAgICAgc2l6ZXM9IjEwMHZ3IgogICAgICAgICAgICBhbHQ9IiIKICAgICAg ICAvPgogICAgPC9waWN0dXJlPgogICAgPHA+Q3VycmVudGx5IG9uIDQwMHB4IHdpZGUgdmlld3Bv cnQgPGNvZGU+aHR0cHM6Ly9kdW1teWltYWdlLmNvbS81MTJ4NDUwLzEwMDwvY29kZT4gKDxjb2Rl Pmh0dHBzOi8vZHVtbXlpbWFnZS5jb20vMTAyNHg5MDAvMzAwPC9jb2RlPiBvbiByZXRpbmEgc2Ny ZWVuKSBpcyBsb2FkZWQgdXNlbGVzc2x5IGluIGFkZGl0aW9uIHRvIHRoZSBvbmUgbmVlZGVkICg8 Y29kZT5odHRwczovL2R1bW15aW1hZ2UuY29tLzY0MHg5MDAvMDMwPC9jb2RlPiBvciA8Y29kZT5o dHRwczovL2R1bW15aW1hZ2UuY29tLzEyODB4MTgwMC8wNjA8L2NvZGU+IGZvciByZXRpbmEgc2Ny ZWVuKS48L3A+CjwvYm9keT4KPC9odG1sPg==