When cloneNode(true) is executed on a node including an img tag included in a picture tag, the source written in an img tag will be loaded, in spite of a source tag above.
This behavior doesn't occur on chrome.
The code below is minimal example.
<!DOCTYPE html>
<html>
<body>
<picture id="photo">
<source srcset="./photo.webp" type="image/webp">
<img src="./photo.jpg" alt="photo">
</picture>
<div id="container"></div>
<script>
const photo = document.getElementById("photo");
const clonedPhoto =photo.cloneNode(true);
document.getElementById('container').appendChild(clonedPhoto);
</script>
</body>
</html>
This is a bug?
Versions: OS: Apple M1 13.4.1 (c)（22F770820d）(※This behavior occurs on iPhone, too.) Safari: 16.5.2 (18615.2.9.11.10)
This does appear to be a bug. If you're willing, please file a bug at https://bugs.webkit.org with the example given above.