Version

3.2.18

Reproduction link

sfc.vuejs.org/

Steps to reproduce

Follow minimal reproduction link in Safari on macOS with devtools opened on Network tab. Image will load twice.

This is caused by crossorigin attribute placed after src attribute. If you place crossorigin attribute before src, it will load once, as this link shows.

Order of HTML attributes is not supposed to matter, and I assume it's caused by attributes being added one by one (so if src is added first, image will be loaded and it will be loaded once more when loading requirements change, i.e. crossorigin attribute is added).

There is a similar issue in react repository that I found when researching why my crossorigin images won't load on Safari in a Vue project. Safari makes things worse by caching the first request (the one without Origin header) which causes the image to be broken on subsequent requests when images are loaded from certain CDNs.

I'm mostly opening this issue to document this behaviour and save other developers some time if they encounter the same problem. If you would like this to be addressed, I can look into it and try to send a PR which makes sure crossorigin attribute is always added first.

What is expected?

Image should load once on Safari, with Origin header present if crossorigin attribute is set.

What is actually happening?

Image is being loaded twice on Safari, first time without Origin header, second time with Origin header.

This is a bit similar to how value must be set after min/max on <input type="range">... we special-cased that in ff0c8103 - although I'm not sure if we want to do it for crossorigin since it's Safari only (not sure if it should be considered a bug in Safari)