SplitText lines doesn't split nested elements correctly if line-height is too high

[MattiaC]

When using SplitText having a nested element eg. <div>txt <strong>nested</strong></div>and splitting by type "lines" the nested element goes on its own line if the line-height is set too high.

 

The bug presents iteself at line-height:

>= 1.6 Chrome, old Edge, Internet Explorer Windows

>= 1.7 Chrome MacOS

>= 1.5 Firefox Windows/MacOS

 

The bug does not seem to present itself in:

Safari MacOS/iOS

Chrome, Firefox, Samsung internet Android 

See the Pen ExgwYLz by acxwes (@acxwes) on CodePen

[ZachSaucier]

Hey MattiaC and welcome to the GreenSock forums. Thanks so much for supporting GreenSock with a Club GreenSock membership!

 

As covered in the docs, adding strong { display: inline-block; } seems to fix the issue for me in Chrome on MacOS.

[DataCamp IT]

On 12/22/2020 at 7:45 AM, ZachSaucier said:

Hey MattiaC and welcome to the GreenSock forums. Thanks so much for supporting GreenSock with a Club GreenSock membership!

 

As covered in the docs, adding strong { display: inline-block; } seems to fix the issue for me in Chrome on MacOS.

 

I am troubleshooting something similar and I've found a workaround but I'm wondering if there's a more clean way to handle it. If I use the `display: inline-block` option, it alters the result. I've made a minimal pen to show the problem compared with the desired result and a workaround to achieve it: 

See the Pen XWjyXdj by dandenney (@dandenney) on CodePen

Does anyone know of a way to handle this without using extra elements and doubling the split targets?

Additional context: I left out the effects and CSS I'm applying to the words, but I need lines and words in order to have a "masked" line and each word rising up from the mask