Jump to content
Search Community

SVG not displaying in IE

LachlanTS 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,

 

Hoping someone can help me out with an issue I'm having with the animated SVGs in my animation not displaying in IE. Bascially, there's one large SVG that takes up the whole background and then 3 smaller SVGs that are animated next to standard text. I've worked through few suggestions via these forums without any luck so far.

 

All fine in other browsers, but with with IE I'm not even able to view the SVGs to even work out if they're animating correctly or not.

 

Here's the codepen link:

 

 

Further to this, the performance seems to be a bit laggy. Especially on mobile. Love some pointers if someone can help out.

 

Thanks in advance,

 

Lachlan

See the Pen bed88f588e7c90bd4efb5df6e80da438 by lachlants (@lachlants) on CodePen

Link to comment
Share on other sites

Hi LachlanTS :)

 

Welcome to the forum.

 

I took all the SVGs out of your CodePen and they appeared to display correctly in IE11 with no scripts or CSS so I don't believe there is an issue with the SVGs. You are loading a lot of CSS files so my guess is there is something in one of those that IE11 is not liking very much. You can try removing those and adding them back one at a time until it breaks in IE11, but I'm not sure what to tell you other than that. It's a lot to look through.

 

Regarding performance on mobile - you do have a lot of moving pieces and all those CSS files so that may be too much for some mobile browsers. They do have their limits. GSAP doesn't do any of the rendering. It only animates values so it's unlikely to be the source of any laggy performance on mobile.

 

I wish I could be of more help, but as I mentioned, you have a lot to look through.

 

Just an FYI - you don't need the HTML and body tags in CodePen and you should place the styles in the CSS panel rather than pasting it into the HTML panel. It's much easier to review like that too.

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

IE11 is very picky especially when it comes to animating SVG, even with CSS transitions and CSS animations. It will nit-pick about using the url() syntax for stroke color, i.e. in the stroke attribute. And even silently failing when using the url() syntax referencing a linear gradient, usually either applying only on e color or not even adding it at all. Or if the stroke attribute is missing even if you have the CSS equivalent defined in your CSS. And other really strict behavior in IE11. :(

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...

Thanks everyone for your thoughts on this issue, gave me a few clues to go on.

 

The problem ended up being that IE doesn't support CSS3 transforms on the <SVG> element. To solve this I had to wrap the SVG's in a DIV and perform the transforms on the DIV, rather than directly on the SVGs. Although a little clunky, this ultimately solved it.

 

Here's a little more about the issue: http://stackoverflow.com/questions/21298338/css-transform-on-svg-elements-ie9

 

Thanks again!

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