Open Rich-Harris opened 2 years ago
fixed
<div bind:clientHeight={h} /><main>{@html html}{''}</main>
Aside: it would be nice if there was a way to say 'you don't need to replace me, I promise my contents won't have changed since SSR'
+1 this is easily my geatest desire for Svelte. I would love to be able to turn off repair mode
This is a bit more than annoyance, it actually broke my code.
I've created a REPL to replicate my issue: https://svelte.dev/repl/6398f723b642481da32c1c52903fd88e?version=3.46.4
The "display" is shifted right and down compared to the cursor, but aligns perfectly in 3.46.3: https://svelte.dev/repl/6398f723b642481da32c1c52903fd88e?version=3.46.3
@Herdubreid That doesn't seem related to this issue, but to #6990 instead. Svelte's behavior was changed because it didn't respect whitespace inside <pre>
, even though it should to align with browsers.
That makes sense @mrkishi, changing {@html code}
to {code}
makes no difference.
This fix is quite simple.
Change:
<div>
<textarea bind:value={text} style:height={height} spellcheck="false" />
<pre>
<code id="display">
{@html code}
</code>
</pre>
</div>
To:
<div>
<textarea bind:value={text} style:height={height} spellcheck="false" />
<pre><code id="display">{@html code}</code></pre>
</div>
Basically remove unwanted whitespaces within the <pre>
tag.
Thanks for pointing me in the right direction @mrkishi (this has been doing my head in for days)!
Describe the bug
Bear with me, this is a bit of an edge case.
If you have code like this...
it will compile with
hydratable: true
to this:Between
main_nodes.forEach(detach)
andmain.innerHTML = html
, the addition of the resize listener causes a reflow that, long story short, results in you losing your scroll position if you were previously scrolled to#foo
and there's not much content on the page other than the contents of{@html ...}
. This is currently visible on the SvelteKit docs: https://github.com/sveltejs/kit/issues/4216. (Only on Chrome, not Firefox.)Removing the
bind:clientHeight
(or placing it below the{@html ...}
) prevents the bug, as would using aResizeObserver
instead of the resize listener hack. But the biggest mystery is why we're waiting until the mount phase (m
) to doinnerHTML = html
instead of the claim phase (l
).(Aside: it would be nice if there was a way to say 'you don't need to replace me, I promise my contents won't have changed since SSR' —
{@html:leavemealone post.html}
or whatever.)Reproduction
Open this StackBlitz repro and go to the standalone version: https://sveltejs-kit-template-default-pm2sdq--3000.local.webcontainer.io/
Logs
No response
System Info
Severity
annoyance