Jump to content
LachlanTS

SVG not displaying in IE

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:

 

https://codepen.io/lachlants/pen/bed88f588e7c90bd4efb5df6e80da438

 

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

I also don't see any anim in IE11.

I have one guess: CSS based mask animation is not understandable for IE. But I am curious too what is the true cause of this malfunction.

 

If You could make a minimal test case, we could debug it easier.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.