177068 2017-09-18 06:04:35 -0700 Creating a picture element with a source and img element triggers loading of both sources 2020-09-01 09:25:18 -0700 1 1 1 Unclassified WebKit Images WebKit Nightly Build Mac macOS 10.12 RESOLVED DUPLICATE 159484 https://bugs.webkit.org/show_bug.cgi?id=190031 InRadar P2 Normal --- 1 maximuse.chern webkit-unassigned daniel sabouhallawa simon.fraser webkit-bug-importer oldest_to_newest 1349874 0 321087 maximuse.chern 2017-09-18 06:04:35 -0700 Created attachment 321087 Reduced test case When an image element is created: > const image = document.createElement('img'); > image.setAttribute('srcset', 'https://via.placeholder.com/300x100/0e7f00'); webkit starts preloading the srcset immediately. However, when an image is intended to become part of a picture tag: > const picture = document.createElement('picture'); > const source = document.createElement('source'); > const image = document.createElement('img'); > > source.setAttribute('sizes', '100vw'); > source.setAttribute('media', '(orientation: portrait)'); > > image.setAttribute('sizes', '100vw'); > image.setAttribute('alt', 'Placeholder'); > > source.setAttribute('srcset', 'https://via.placeholder.com/550x900/6600af 550w, https://via.placeholder.com/750x1000/a100af 750w'); > image.setAttribute('srcset', 'https://via.placeholder.com/300x100/0e7f00'); > > picture.appendChild(source); > picture.appendChild(image); I expect either the source or the image to be loaded depending on the media query, not both. # Actual Webkit preloads the image tag, and the source tag when it is added to the picture element. # Expected Only the source tag to be loaded when (orientation: portrait) or only the img to be loaded when (orientation: landscape). Chrome handles this scenario correctly by cancelling the initial request for the image's srcset when it becomes a child of the picture element. Reduced test case: https://s.codepen.io/maximus8891/debug/LzVjNZ/ZorBajwPWeOM Possible duplicates: https://bugs.webkit.org/show_bug.cgi?id=6656 https://bugs.webkit.org/show_bug.cgi?id=35377 1350084 1 webkit-bug-importer 2017-09-18 14:05:41 -0700 <rdar://problem/34500892> 1684492 2 sabouhallawa 2020-09-01 09:25:18 -0700 This is the same as bug 159484. They both address the issue of loading multiple resources for the same <picture> element although a single resource will be displayed at the end. *** This bug has been marked as a duplicate of bug 159484 *** 321087 2017-09-18 06:04:35 -0700 2017-09-18 06:04:35 -0700 Reduced test case file_177068.txt text/plain 775 maximuse.chern PHNjcmlwdD4NCiAgKF8gPT4gew0KICAgIGNvbnN0IHBpY3R1cmUgPSBkb2N1bWVudC5jcmVhdGVF bGVtZW50KCdwaWN0dXJlJyk7DQogICAgY29uc3Qgc291cmNlID0gZG9jdW1lbnQuY3JlYXRlRWxl bWVudCgnc291cmNlJyk7DQogICAgY29uc3QgaW1hZ2UgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50 KCdpbWcnKTsNCg0KICAgIHNvdXJjZS5zZXRBdHRyaWJ1dGUoJ3NpemVzJywgJzEwMHZ3Jyk7DQog ICAgc291cmNlLnNldEF0dHJpYnV0ZSgnbWVkaWEnLCAnKG9yaWVudGF0aW9uOiBwb3J0cmFpdCkn KTsNCg0KICAgIGltYWdlLnNldEF0dHJpYnV0ZSgnc2l6ZXMnLCAnMTAwdncnKTsNCiAgICBpbWFn ZS5zZXRBdHRyaWJ1dGUoJ2FsdCcsICdQbGFjZWhvbGRlcicpOyANCg0KICAgIHNvdXJjZS5zZXRB dHRyaWJ1dGUoJ3NyY3NldCcsICdodHRwczovL3ZpYS5wbGFjZWhvbGRlci5jb20vNTUweDkwMC82 NjAwYWYgNTUwdywgaHR0cHM6Ly92aWEucGxhY2Vob2xkZXIuY29tLzc1MHgxMDAwL2ExMDBhZiA3 NTB3Jyk7IA0KICAgIGltYWdlLnNldEF0dHJpYnV0ZSgnc3Jjc2V0JywgJ2h0dHBzOi8vdmlhLnBs YWNlaG9sZGVyLmNvbS8zMDB4MTAwLzBlN2YwMCcpOyANCg0KICAgIHBpY3R1cmUuYXBwZW5kQ2hp bGQoc291cmNlKTsNCiAgICAvLyBVbmNvbW1lbnQgdG8gbG9hZCB0d28gaW1hZ2VzDQogICAgLy8g c2V0VGltZW91dCgoKSA9PiB7DQogICAgICBwaWN0dXJlLmFwcGVuZENoaWxkKGltYWdlKTsNCiAg ICAvLyB9LCAxNTAwKTsNCiAgfSkoKTsNCjwvc2NyaXB0Pg==