Safari/Firefox Picture img source download twice

[lbineau]

Vue version

3.5.21

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-w4e7d18g?file=vite.config.js,src%2Fmain.js,index.html&terminal=dev

Steps to reproduce

1. configure the build to use the bundler version

  resolve: {
    alias: {
      vue: "vue/dist/vue.esm-bundler.js",
    },
  },

2. Use this template in the HTML file

    <div id="app">
      <picture>
        <source
          media="(min-width: 800px)"
          srcset="https://placehold.co/800x400/4CAF50/red?text=Desktop+Image"
        />
        <source
          media="(min-width: 400px)"
          srcset="https://placehold.co/600x300/2196F3/yellow?text=Tablet+Image"
        />
        <img
          src="https://placehold.co/300x200/FF9800/white?text=Img+SRC"
          alt="Responsive sample image"
        />
      </picture>
    </div>

3. Mount the app template with Vue

import { createApp } from 'vue'
createApp().mount('#app')

4. Launch on Safari in a resolution so it shows the image for desktop/tablet
5. Inspect the network panel from devtools

What is expected?

• It should download only the correct source and not download image from <img src> in addition.

What is actually happening?

• The image from <img src> is downloaded in addition of the image from <source srcset>.
• This seem to happen only with in-DOM template
• I believe this happen when the in-DOM template is transformed into shadow DOM. An Image class might be created and be assigned an src before it is added to the Picture. This triggers the image to download.

System Info

Safari macOS/iOS all versions
Firefox seems also to have the bug but the image takes time to download

Any additional comments?

• I know there is a similar issue opened here: picture tag request twice on Safari #12187 but this issue seems to be solved in a strange way: moving the <img> as the first child of <picture> tag which is invalid (and doesn't work)
• This seem to happen only with in-DOM template
• The code sample has base64 images because of Stackblitz not allowing external images.

[edison1105]

duplicate of #4680