Svelte 5: `<img loading="lazy">` loads eagerly in Firefox (regression) about svelte HOT 5 CLOSED

Hello,

The difference seems to come from the fact that Svelte 4 uses createElement('img') while Svelte 5 uses createElement('template').

Exemple here :

• REPL Svelte 4

• REPL Svelte 5

• addRandomImageUsingSvelte work on Svelte 4 but not Svelte 5

• addRandomImageUsingTemplate do no work on Firefox

• addRandomImageUsingElement work

This appears to be a Firefox's bug...

from svelte.

I think I vaguely remember this coming up before. I think it was related to the order that attributes are attached to the element - i.e., if src were attached before loading was, the image would start to load right away. I don't remember what the resolution was at the time.

from svelte.

I think I vaguely remember this coming up before. I think it was related to the order that attributes are attached to the element - i.e., if src were attached before loading was, the image would start to load right away. I don't remember what the resolution was at the time.

Do you mean #7657? I'm not sure how much it's related as the order of attributes is "correct" in my code — maybe different story on the emitted side?

from svelte.

This appears to be a Firefox's bug...

Potentially due to this?: https://bugzilla.mozilla.org/show_bug.cgi?id=1758288

Although I can't seem to reproduce the provided example when loading="lazy" is specified on the template, only without it.

Edit: nevermind, seems like the download is triggered when the img element is mounted from the template to the DOM, so I guess it's unrelated.

Edit 2: poking around some more, it seems like the img created in template has its src prepopulated by img.baseURI, while the one created with createElement is empty. Seems to point to https://bugzilla.mozilla.org/show_bug.cgi?id=1804875 being the root cause?

const template = document.createElement('template');
template.innerHTML = '<img height="200" width="200" loading="lazy" alt="" src="" />';
const img1 = template.content.firstChild;
console.log("img1 src:", img1.src);

const img2 = document.createElement('img');
img2.height = 200;
img2.width = 200;
img2.loading = "lazy";
img2.alt = "";
console.log("img2 src:", img2.src);

from svelte.

I wonder if this is another of those cases that fails when using cloneNode vs document.importNode on the template. Related maybe is Solid's issue on this solidjs/solid#1828

from svelte.