SplitText adding empty line in IE11

[friendlygiraffe]

Finally got round to using SplitText, but I am having a weird bug in IE11.

 

This is how the text looks like without initialising SplitText:

 

 

This is what happens after I add SplitText, as you can see there is a gap underneath:

 

 

It works fine in all other browsers, any clues? CodePen attached

 

 

See the Pen jOMmrXV by friendlygiraffe (@friendlygiraffe) on CodePen

[ZachSaucier]

Hey friendlygiraffe. This is simply an IE rendering bug. You can check this by using the dev tools in IE11 to toggle any property of the #Headline_Copy. If you do so you'll see the rendering error disappear, even if you toggle the property back on. It's easier to see if you don't loop the the animation like this but it's also visible in your demo until the next item is animated. 

 

You might be able to find some work around by searching the internet and trying out different properties applied to different elements that you have to make it spend more effort rending things properly. Or you may find there is no fix. Regardless it's not an issue with GSAP or SplitText. Sorry that we can't be of more help.

[friendlygiraffe]

Thanks for replying.

 

I'm sure it is an IE problem (Please when will they delete that thing), but the gap underneath appears to be the same size as a line of text , at least when I set the split to 'words'.  Which makes me think there's might be a trick in gsap I've overlooked?  Any ideas at all appreciated 

[friendlygiraffe]

 var split = new SplitText("#Headline_Copy", {type: "chars,words" , position:"absolute"});

 

I had a look through the docs and tried setting position:"absolute" , which amazingly fixes it in IE11, but ruins it in everything else: