Chrome devtools makes SplitText break lines at wrong point

[SIeepwalker]

I just found a weird bug. I have SplitText set on type: "lines" for a p in my code. It renders like this:

 

 

However, if I reload the page, the lines break at weird points like so:

 

 

It doesn't seem to be a window size issue as I do not have this problem if I close devtools and resize the page manually before reloading.

Since it works fine without devtools open, it is not really an issue but I am curious as to what would cause this.

(Also, since I always dev with devtools open, it took me way longer than I would admit to find the source of the problem, and I was pulling my hairs out ?‍♂️).

 

Thank you for your time reading this and happy Tweening

 

EDIT: added codepen with my full code (missing some images and fonts) but the problem does not reproduces inside of codepen.

See the Pen dyVQKzV by sieepwalker (@sieepwalker) on CodePen.

[OSUblake]

Welcome to the forums @SIeepwalker

 

Do you think you can make a minimal demo that shows the issue so we can investigate the problem? Thanks!

[SIeepwalker]

44 minutes ago, OSUblake said:

Welcome to the forums @SIeepwalker

 

Do you think you can make a minimal demo that shows the issue so we can investigate the problem? Thanks!

Thank you for your answer. I tried to make a codepen but didn't manage to reproduce the bug inside of it.

I will edit my post to add it anyway so you can see my full code. It is missing some fonts and images that I only have locally on my machine.

[OSUblake]

I'm wondering if perhaps font loading is messing with it. I usually create my SplitText stuff after the fonts have been loaded.

 

https://stackoverflow.com/a/32292880/2760155

 

 

[SIeepwalker]

@OSUblake Wow, this was actually the cause, thank you very much.

 

I didn't even consider something like that, the SplitText posts I've checked didn't mention it either, sorry that I didn't find the right one(s).

Makes sense that devtools would trigger the issue now, as I have it prevent caching when open.