Comments (5)
Hello,
The difference seems to come from the fact that Svelte 4 uses createElement('img')
while Svelte 5 uses createElement('template')
.
Exemple here :
-
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 beforeloading
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.
Related Issues (20)
- Svelte 5: is there a way to type `{...props}`? HOT 2
- A simple component without script tag generates broken code when compiled HOT 2
- Reactive Set .size not updated after .delete() HOT 1
- Svelte 5: Transition doesn't worked in nested if statements HOT 3
- Svelte 5 REPL: cannot add *.ts files
- Svelte 5 REPL: reload button HOT 4
- Svelte 5 : Reactive array operations (filter, map...)
- It is not possible to declare states in static fields of a class HOT 1
- [Svelte 5] Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'nodeType') HOT 2
- Svelte 5: SSR Errors are not specific enough & can't be disabled HOT 3
- Svelte 5.0.0-next.142 regression HOT 1
- duplicate component issue is caused by using the fade transition. HOT 2
- Svelte 5 exports in rune mode to expose variables for programmatic use (for instance updates) HOT 3
- Svelte 5: Incorrect IfBlock Start Position in Modern Mode Parsing HOT 4
- Svelte 5: Maximum update depth exceeded. (effect_update_depth_exceeded) HOT 14
- hydrate and mount error out in browser, saying 'hydrate(...)' is not available on the server HOT 2
- Add setter to let variables accessors HOT 3
- Svelte 5: cannot bind to a `<svelte:component/>` element HOT 2
- Svelte 5: Flickering CSS transitions/animations starting in `next-144` HOT 1
- Svelte 5: Imported component applied global style HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelte.