Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
howeller

Spilt Text breaking sup tags into new lines in IE11

Recommended Posts

I am using Split Text (v.0.5.8) to create a simple line by line animation which works awesome. I've run into an IE11 issue when I use<sup> tags in the string they get broken out into their own div which is set to be a block element. So my initial div:

<div id="txt">I can't wait <br>until we drop IE11<sup style='font-size:50%;'>®</sup>!</div>
<script>
  var t1 = new SplitText(document.getElementById("txt"), {type:"lines", linesClass: "line-span", reduceWhiteSpace:false});
</script>

will print 2 divs in most browsers as expected.

<div class="line-span" style="text-align: left; display: block; visibility: inherit; position: relative; opacity: 1;">I can't wait </div>
<div class="line-span" style="text-align: left; display: block; visibility: inherit; position: relative; opacity: 1;">until we drop IE11®!</div>

But in IE11 it buts the <sup> into extra an div and prints 4 divs.

<div class="line-span" style="text-align: left; display: block; visibility: inherit; position: relative; opacity: 1;">I can't wait </div>
<div class="line-span" style="text-align: left; display: block; visibility: inherit; position: relative; opacity: 1;">until we drop IE11</div>
<div class="line-span" style="text-align: left; display: block; visibility: inherit; position: relative; opacity: 1;">®</div>
<div class="line-span" style="text-align: left; display: block; visibility: inherit; position: relative; opacity: 1;">!</div>

I saw Carl's video addressing the issue and tried the patch of adding display:inline-block; into the tag fixes the issue in IE11, but creates the same issue in every browser.

 

See the Pen qBZqOBE by howeller (@howeller) on CodePen

Link to comment
Share on other sites

Hey howeller and welcome to the GreenSock forums.

 

Solution: Don't support IE ;) 

 

Kidding. A demo would be helpful if you could create a minimal one pretty quickly. Though it sounds like it should be pretty easy to recreate so if you can't get around to it in the next hour or two I'll probably create my own.

Link to comment
Share on other sites

I can't seem to reproduce the problem. A few question for your, @howeller:

  1. Are you saying that this URL in IE11 breaks the text into 4 lines instead of 2?: https://cdpn.io/howeller/debug/qBZqOBE/yYMyLJZoPVOk
  2. You mentioned a solution from Carl that broke it in every browser - is that what you meant? The inline-block thing broke it everywhere? Again, I'm not able to see this. 
  3. Just curious - I didn't see a Club GreenSock membership on your account - did you register under a different account? SplitText is only for "Shockingly Green" and higher. 
  • Like 1
Link to comment
Share on other sites

Hi Jack - thank you for taking time to look into this.

I am only seeing this break into 4 lines in IE11. When I add in display:inline-block into the <sup> tag it then corrects itself in IE, but then splits into 4 lines on most every other browser. Here's the link I am debug pen I tested in IE11: https://cdpn.io/howeller/debug/qBZqOBE/DqADdgDqJKeA

It appears to change each time I make an edit.

I do not have a membership on my personal account. We do have one here at work which this project is for. I'll have to dig up the account it's registered under.

Screen Shot 2020-08-22 at 9.05.15 PM.png

Link to comment
Share on other sites

The tricky thing is that in order for SplitText to distinguish when there's a new line, it must know how far things can deviate from the top of the previous element to be considered a new line. By default it lets things wander by 20% of the font-size. In the next update of SplitText, I can add a lineThreshold so you can control that. So lineThreshold: 0.2 would let things wander by 20% whereas lineThreshold: 0.6 would let them wander by 60% of the font-size before being considered a new line. Sound good? You can try it out with this file on CodePen: 

https://assets.codepen.io/16327/SplitText3.min.js

 

I forked your demo and simplified the code a bit: 

See the Pen a35bce63c100166e20abe6d914b1e264?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Better? 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

That did the trick! Your update has IE only making 2 divs like all other browsers.

 

Thank you for taking time out to look at this! Can't wait until we are able to drop IE support.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×