Sparkles make words jump (on small screen sizes)

[eQRoeil]

When sparkles appear / disappear they make words jump to the next line (and back)

captures (around 430px viewport width, chrome desktop) same on android device (412px viewport with)

chrome bug it seems, as the span & svg are positioned (absolute) they should not make siblings move.
firefox & safari mac do not seem to be affected.

note : a sparkle may appear at the end of an empty line (when one word go to next line)
a solution might be to not place with top & left but create a span for each word and place randomly the sparkle wrapper between the spans.

[stefanjudis]

Thanks for the bug report. :)

When sparkles appear / disappear they make words jump to the next line (and back)

Unfortunately, I fail to reproduce this one.

A solution might be to not place with top & left but create a span for each word and place randomly the sparkle wrapper between the spans.

Yeah, I see how an inline element spanning multiple lines leads to surprising behavior. I'm not sure about injecting spans though. Ideally, <sparkly-text /> works in multiple scenarios.

Two quick examples I could think of:

<sparkly-text><strong>a word</strong></sparkly-text>
<strong><sparkly-text>a word</sparkly-text></strong>

Not sure, if injecting spans wouldn't introduce corner cases. 🤔

[eQRoeil]

can reproduce with chrome 119 & 121 (canary) on mac

sparkles.mp4

fun experiment to make with spans, I will try something

[stefanjudis]

Thanks for the repo. :) Yeah this indeed looks like a browser bug. 🫣

fun experiment to make with spans

I thought a bit more about it and I think I might have changed my mind. The element is called sparkly-text so I think it'd be easier to enforce a text node and throw if there are other elements in a <sparkly-text /> and just ship v2. 😅

I will try something

Cool! Then I'll wait a bit. And no pressure — any help is greatly appreciated. :)