SplitText plugin bug with <em>

[Webit Interactive]

There seems to be an issue with the <em> tag and the SplitText plugin in the GSAP version below.

As you can see in the screenshots, it breaks all <em> tags into new lines, but it does seem to respect the <strong> tags.

 

GSAP Business v3.11.3

Expected (and base text) behaviour: https://gyazo.com/551114c1711155482da296989ed33847

Split (lines) behaviour: https://gyazo.com/a8aa6d94effc0856fc7776ea051cea85

<strong> is respected: https://gyazo.com/907bf5caa5ccb04ae6e9ac5996fe63e2

 

Is it a known issue? Thank you

[GreenSock]

Howdy, @Webit Interactive. Welcome to the forums!

 

As the docs state, it isn't feasible to split by lines when there are nested tags, and it's virtually impossible for us to troubleshoot without a minimal demo but it seems to work as expected here: 

See the Pen NWzreZm by GreenSock (@GreenSock) on CodePen

 

If you still need some help, please post a minimal demo that clearly shows the issue and we'd be happy to take a look. 

[Webit Interactive]

UPDATE: The issue is fixed by adding "display: inline-block" to the <em> tag. *shrugs*

 

Hello @GreenSock.

 

I have converted part of the block to codepen for testing. I have found the problem, though the logic behind it cannot be explained. Basically, the secondary font used for the <em> tag makes it break. I am eager to know if you would have any ideas as to why! Hehe

 

Here is the codepen:

See the Pen XWYKOMM by mpare (@mpare) on CodePen

[GreenSock]

Glad you found a solution. Thanks for posting back. Yeah, display of inline is totally different than inline-block because the former allows for wrapping onto different lines.