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

[yamplum]

Describe the bug

Setting loading="lazy" on an <img> element in a Svelte 5 component does not affect a change when viewed in Firefox, and the image is still loaded eagerly. This appears to be a regression from Svelte 4, where the attribute correctly makes the images load lazily. Chromium-based browsers appear unaffected based on a very quick test.

On my machine, Svelte 4:

Svelte 5:

This may or may not be connected to one of the reported Firefox bugs in this area:

• https://bugzilla.mozilla.org/show_bug.cgi?id=1804875
• https://bugzilla.mozilla.org/show_bug.cgi?id=1647077

Reproduction

Minimal reproduction:

{#each new Array(10) as index}
	<img height="200" width="200" loading="lazy" src="https://picsum.photos/seed/{Math.random()}/200">
{/each}

<style>
	img {
		display: block;
		margin: 20px;
	}
</style>

Run in Svelte 4 REPL and Svelte 5 REPL with the Firefox devtools network tab open and compare the behavior.

Logs

No response

System Info

System:
    OS: Linux 6.8 EndeavourOS
    CPU: (12) x64 AMD Ryzen 5 4600HS with Radeon Graphics
    Memory: 1.60 GB / 15.05 GB
    Container: Yes
    Shell: 3.7.1 - /usr/bin/fish
Binaries:
    Node: 21.7.3 - /usr/bin/node
    npm: 10.5.2 - /usr/bin/npm

Browser information

Name               Firefox
Version 	   125.0.3
Build ID 	   20240429224707
Distribution ID    archlinux
User Agent 	   Mozilla/5.0 (X11; Linux x86_64; rv:125.0) Gecko/20100101 Firefox/125.0
OS 	           Linux 6.8.9-arch1-1 #1 SMP PREEMPT_DYNAMIC Thu, 02 May 2024 17:49:46 +0000

Severity

blocking an upgrade

[Conduitry]

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.

[yamplum]

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 https://github.com/sveltejs/svelte/issues/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?

[adiguba]

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...

[yamplum]

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);

[trueadm]

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 https://github.com/solidjs/solid/issues/1828