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

[yamplum]

Describe the bug

This is a continuation of #11497. It seems that lazy loading still breaks in some uncertain conditions. In particular, the images load eagerly when the <img> is wrapped in a logic block ({#if}, {#each}, maybe others) and there's a sibling element next to the block, such as the div in my repro, or the entire block is wrapped in another element.

Originally posted by @yamplum in #11545 (comment)

cc @trueadm

Reproduction

<div style="height: 3000px; background: black;"></div>

<!-- Also doesn't work in {#each} blocks.  -->
{#if true}
	<img height="200" width="200" loading="lazy" src="https://picsum.photos/seed/{Math.random()}/200">
{/if}

Svelte 4 REPL

Svelte 5 REPL

Alternatively:

<div>
	<!-- Also doesn't work in {#each} blocks.  -->
	{#if true}
		<img height="200" width="200" loading="lazy" src="https://picsum.photos/seed/{Math.random()}/200">
	{/if}
</div>

<style>
	img {
		margin-top: 3000px;
	}
</style>

Svelte 4 REPL

Svelte 5 REPL

Logs

No response

System Info

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


Browser:
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

[yamplum]

Also I tried to test out the simple case (no logic blocks) in a local SvelteKit project and it seems to load eagerly despite correctly lazy-loading in REPL. (I disabled SSR if it makes a difference.) Here's the reproduction repo and equivalent Svelte 5 REPL

[dummdidumm]

@trueadm I remember you said that you had to give comment nodes the importNode treatment aswell because of reasons - is it maybe that if a parent that isn't inserted yet, and that is not using importNode, is then introducing that bug to all its children that are added to it, regardless of whether or not their elements where created using importNode or not? If this is true, does that mean we should just ditch the cloneNode logic altogether and always use importNode?