howeller Posted August 19, 2020 Share Posted August 19, 2020 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 More sharing options...
ZachSaucier Posted August 20, 2020 Share Posted August 20, 2020 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 More sharing options...
howeller Posted August 20, 2020 Author Share Posted August 20, 2020 Hi Zach - I am totally fighting the non support front. Plan B is to find a fix. I just added a Pen to my issue above. I can see this in IE11 when I paste the debug view URL https://cdpn.io/howeller/debug/qBZqOBE/yYMyLJZoPVOk Is that adequate? Thanks for looking into this! 1 Link to comment Share on other sites More sharing options...
GreenSock Posted August 22, 2020 Share Posted August 22, 2020 I can't seem to reproduce the problem. A few question for your, @howeller: Are you saying that this URL in IE11 breaks the text into 4 lines instead of 2?: https://cdpn.io/howeller/debug/qBZqOBE/yYMyLJZoPVOk 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. 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. 1 Link to comment Share on other sites More sharing options...
howeller Posted August 23, 2020 Author Share Posted August 23, 2020 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. Link to comment Share on other sites More sharing options...
GreenSock Posted August 23, 2020 Share Posted August 23, 2020 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? 2 1 Link to comment Share on other sites More sharing options...
howeller Posted August 23, 2020 Author Share Posted August 23, 2020 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now