Jump to content
Search Community

PLEASE HELP ME!!!! SplitText Ignoring/Removing <br> Tags from InnerHTML

fredcorr test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

HI All

 

I have an issue with IE10 using splitText.

 

When using splitText in IE the <br> tag get's ignored, this becomes a problem especially when I apply different positioning to each line. Indeed without the correct line break, I can't target specific lines and change their position or other CSS values.

 

I did try white-space but that doesn't seem to work.

 

Can someone please help me?

See the Pen BwvPgg?editors=0110 by Corradi (@Corradi) on CodePen

Link to comment
Share on other sites

Hello @fredcorr  and welcome to the GreenSock forum!

 

Sorry your having an issue!

 

When i look at the code being outputted i see SplitText applying the custom class you have on each line:

  • Frame1lines1
  • Frame1lines2

So there is a way for you to target those lines for applying position to each line.

 

I also see SplitText adding a separate <div> for each word within each of the <div> lines: Frame1lines1 and Frame1lines2. Try opening your browser inspector and you will see the <div>'s SplitText creates for lines and words.

 

I looked at IE11 and did not see this issue. I presume you are on Windows 7? If you are viewing in IE10 i strongly recommend you update to IE11. Microsoft doesn't even support IE10 anymore. Last security update for IE10 was in January 2016.

 

Unless I'm missing something here? Let's see if others are seeing what I'm seeing after SplitText splits your lines and words into usable markup?

 

:)

  • Like 5
Link to comment
Share on other sites

Hi Both

 

Thanks for the reply.

 

I have no option, but to make sure it works even in IE10 on windows 7(Even if the problem persist in IE11), because the client uses such browser to

review the display unit.

 

I know it's outdated but it's not in my control.

 

Anyway I have tried to put the source file(so not minified files) onto an FTP and the unit works properly, which made me think that the problem is in the compiling process rather than in the code it self. Have you ever came across such issue?

 

Thanks again

 

Best

Link to comment
Share on other sites

I have. Although I won't be able to tell you exactly how to fix. 

 

From what you are describing, your minification is mangling the code in a manner that IE can't parse it. As @Jonathan once taught me, IE is very strict when parsing and while some other browser will read a mangled bit of code and still make some sense of it, IE will simply consider that invalid code and will ignore it.

 

Do use the opportunity to flag to your client that they're using out of date browsers who will not have security patches applied to them and are more vulnerable to malicious attacks.

  • Like 1
Link to comment
Share on other sites

Thanks @Dipscom

 

I'm currently merging multiple Js files into one minified version. I just tried to leave the SplitText minified file out of the

merging but that didn't seem to affect the issue in any way, plus the copy is pulled in by an external file for dynamic content.

 

I'm running out of time, even a workaround would help.

 

I will flag it, but its a company system that relies on IE.

 

Best

 

 

Link to comment
Share on other sites

If I were in your position - I'd not minify the whole code. If everything is breaking on that stage, leave it out. I don't think anyone using IE10 will notice a dip on performance if you don't minify the deployment code.

 

To me, and take my word as an opinion - not a rule or guidance, that would be the solution.

 

And, good luck! I've been on that position of having to support unsupported browsers. Not a fun place to be.

  • Like 3
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.
×
×
  • Create New...