Bug: SplitText.revert() removes trailing <br> tags

[pakl]

When reverting a SplitText operation any trailing line breaks are removed from the text, causing a different result:

 

See the Pen Deiba by patrickklug (@patrickklug) on CodePen.

[jamiejefferson]

That codepen is linking to a year old version of SplitText, although I'm not sure if this has been subsequently fixed.

 

The description of the bug isn't quite accurate, although the different result certainly exists. It appears that SplitText is adding a phantom space after a trailing <br/> which gives the appearance of an extra, empty line, but reverting it is actually restoring the exact original HTML without this phantom. It can also be seen by including a <br/> surrounded by white space in the middle of text.

[pakl]

Sorry about using the old version. I was just forking the first splittext example I could find. The bug (or a similar one) is in the latest version, which I assume is beta 0.2.4. 

[Rodrigo]

Hi,

As Jamie I can't see an issue in this one regarding the <br> tag. I tested your codepen using the latest version 0.2.4 and it reverts correctly.

 

A suggestion would be to eliminate all the white space before and after the <br> tag in order to prevent extra lines in the resulting text or use position:"absolute" in the splitText config object.

 

I forked your codepen:

 

See the Pen tzuKk?editors=101 by rhernando (@rhernando) on CodePen.

[jamiejefferson]

To clarify, I agree there is probably a small bug here - if you add a single space on one side of a <br/> tag it will add an extra line break that's not there in the original HTML - effectively a double <br/> where only one should exist.

[Rodrigo]

To clarify, I agree there is probably a small bug here - if you add a single space on one side of a <br/> tag it will add an extra line break that's not there in the original HTML - effectively a double <br/> where only one should exist.

Yep, and using position:"absolute" solves that particular issue. The issue is that splitText adds an extra <div> tag to replace that space before and/or after the <br> tag, thus creating the extra line(s).

[jamiejefferson]

I think I'm missing something - how are you applying the position:"absolute" to fix it?

See the Pen dxwFh by jamiejefferson (@jamiejefferson) on CodePen.

[Rodrigo]

Ahh, silly me, in the splitText config object, not the CSS.

var mySplitText = new SplitText("#quote", {type:"lines,words,chars", position:"absolute"});

In this case the solution to the issue has to do with the position of the extra <div> element, since is now absolute it's removed from the document's flow, but the extra element is still there. Without passing position:"absolute", the <div> element has a position:relative in it's inline style and a child element (also a <div> tag with position:relative) that causes the extra line. If the child element is either removed or it's position is set to absolute, the issue is solved as well.

[Carl]

Hey Guys,

 

Thanks for the assist. This ended up being an issue that needed fixing in SplitText.

 

Pakl,

 

It appears your original pen is now loading the fixed version. Let us know if you have any other problems.

Sorry for the inconvenience.

 

Carl