You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Commit 04bc37d of Svelte breaks hydration in IE11. Elements seems to be "shuffled" after hydration.
Indeed, in the effort of handling legacy support of SvelteKit (sveltejs/kit#12), specifically on the PR draft sveltejs/kit#2745 the author of PR describe this problem as something that wasn't fixed:
While hydration in IE11 there is a bug that makes all elements "shuffle" on IE11 (it is better to see this). Was not trying to figure out this problem yet.
The reason it happen is very simple. In dom.ts, the author used Node.parentElement:
IE11 and some other legacy browsers don't support Node.parentElement if the current node isn't Element.
The solution is very simple - just use Node.parentNode instead, long description for an easy fix. I will send PR for this soon.
An alternative to this simple method is to force to use a polyfill that implement Node.parentElement via Node.parentNode, but it is not common (didn't find it on polyfill.io, or any other common resource). I did find though some implementation, which is for short:
But I don't think it's a good idea to force all the legacy users to implement this non-standard polyfill, when the other solution is very easy.
Reproduction
The reproduction is easy - simply by the old good repo sapper-ie.
If you will use the same version of packages that are currently defined in this repo (by npm ci), you'd find that this sapper example works as it should:
However, if you install an updated version of svelte in this repo (every version >= 3.38.3, since every such version includes 04bc37d), you'll see that elements are shuffled:
Describe the bug
Commit 04bc37d of Svelte breaks hydration in IE11. Elements seems to be "shuffled" after hydration.
Indeed, in the effort of handling legacy support of SvelteKit (sveltejs/kit#12), specifically on the PR draft sveltejs/kit#2745 the author of PR describe this problem as something that wasn't fixed:
The reason it happen is very simple. In
dom.ts
, the author usedNode.parentElement
:svelte/src/runtime/internal/dom.ts
Line 119 in 04bc37d
But as you can see in MDN,
IE11 and some other legacy browsers don't support
Node.parentElement
if the current node isn't Element.The solution is very simple - just use
Node.parentNode
instead, long description for an easy fix. I will send PR for this soon.An alternative to this simple method is to force to use a polyfill that implement
Node.parentElement
viaNode.parentNode
, but it is not common (didn't find it on polyfill.io, or any other common resource). I did find though some implementation, which is for short:But I don't think it's a good idea to force all the legacy users to implement this non-standard polyfill, when the other solution is very easy.
Reproduction
The reproduction is easy - simply by the old good repo sapper-ie.
If you will use the same version of packages that are currently defined in this repo (by
npm ci
), you'd find that this sapper example works as it should:However, if you install an updated version of svelte in this repo (every version
>= 3.38.3
, since every such version includes 04bc37d), you'll see that elements are shuffled:Logs
No response
System Info
The text was updated successfully, but these errors were encountered: