Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Johanna

Issues with Internet Explorer 11

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

I'm currently testing out a basic animation on our company's WordPress site just to see if I can get some animated SVGs working. The image is an SVG and I've used a few simple tweens, drawSVG and TimelineLite. It's nothing fancy or special I'm just trying to get it to work.

 

I've attached the CodePen link to this topic. The animation in there works fine, I've also uploaded it onto the site (link below), as well as the JS files needed to run it. Everything works perfectly on all browsers, except Internet Explorer, which is the one most of our users use so is the most important.

http://dev.on-trac.co.uk/wp/safe-work-packs-svg-test/

The image in question is just below the first piece of text on a white background. You may need to reload the page to see it run as I haven't configured it to run on scroll yet.

 

The animation JS script is within <script></script> tags in the HTML of the page.

 

I'm having a couple issues with IE which I'll list below.

- The animation running is very inconsistent. Sometimes it runs, most times it doesn't, no errors show up in the developer console. It just shows the normal SVG with no changes, can't figure out why.

- When it does run, the first few steps of the timeline run fine, until it gets to the two orange lines (line 13 in the codepen), these don't show at all. Then when it gets to the blue lines(line 15 + 17), these run incredibly slow/choppy.

 

I just can't firgure out why it isn't working in IE, hopefully some of you can shed some light on the situation.

 

Thanks in advance

See the Pen rvvxRL by CodesaurusRex (@CodesaurusRex) on CodePen

Link to comment
Share on other sites

Thanks for the demo. The site looks nice too.

 

I have to say I was a bit suprised when I saw the source for the SVG. The artwork could probably be constructed of a dozen or so rectangles and simple paths yet the svg is extremely complex with over 1000 lines of code. 

 

I noticed you are doing drawSVG and opacity tweens on every element with a class of "st4"and saw that almost every line in the svg has that class.

 

I ran some code to see how many elements have st4 as class.

 

console.log(document.querySelectorAll(".st4").length)

 

That returns 780. For each path the browser has calculate the length of the path and the update the stroke-dash-array and change opacity at 60 times per seconds while other things are going on. Unfortunately, SVGs do not at all benefit from GPU hardware acceleration. My guess is that IE11 is simply not up to the task.

 

My first recommendation is to recreate the artwork with simpler shapes (even if this requires re-building it from scratch)

 

Second, be sure that you are only animating the lines you need to. You can do this by applying a unique class to only the lines you want to animate.

  • Like 5
Link to comment
Share on other sites

Hi @Johanna :)

 

Your animation ran fine for me in IE11 with one exception. The only problem I saw was the orange lines. That's a weird IE11 bug when you have stroke-linecap: round. If you also set stroke-linejoin:round on your .st7 class, you should be good to go. You can also check out this thread:

Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

PS But I'd definitely echo @Carl's advice about simplifying your SVG.  

  • Like 2
Link to comment
Share on other sites

16 hours ago, Carl said:

Thanks for the demo. The site looks nice too.

 

I have to say I was a bit suprised when I saw the source for the SVG. The artwork could probably be constructed of a dozen or so rectangles and simple paths yet the svg is extremely complex with over 1000 lines of code. 

 

I noticed you are doing drawSVG and opacity tweens on every element with a class of "st4"and saw that almost every line in the svg has that class.

 

I ran some code to see how many elements have st4 as class.

 


console.log(document.querySelectorAll(".st4").length)

 

That returns 780. For each path the browser has calculate the length of the path and the update the stroke-dash-array and change opacity at 60 times per seconds while other things are going on. Unfortunately, SVGs do not at all benefit from GPU hardware acceleration. My guess is that IE11 is simply not up to the task.

 

My first recommendation is to recreate the artwork with simpler shapes (even if this requires re-building it from scratch)

 

Second, be sure that you are only animating the lines you need to. You can do this by applying a unique class to only the lines you want to animate.

 

That's great advice, thank you. That explains why I couldn't figure it out by just looking at dev tools.

 

I was wanting to simplify the SVG down but as I was just testing it I didn't think it necessary to spend time drawing the whole thing from scratch. Looks like I'll have to though!

 

Thank you very much for your help.

Link to comment
Share on other sites

16 hours ago, PointC said:

Hi @Johanna :)

 

Your animation ran fine for me in IE11 with one exception. The only problem I saw was the orange lines. That's a weird IE11 bug when you have stroke-linecap: round. If you also set stroke-linejoin:round on your .st7 class, you should be good to go. You can also check out this thread:

Happy tweening.

:)

 

Yeah I think I'll have to re-draw the SVG, I'll keep these in mind when I'm doing so :-D

 

Thanks!

  • Like 1
Link to comment
Share on other sites

Thanks for both of your help with this, I've managed to get it working now so thank you very much!

 

Changes I had to make are below.

 

- Started the SVG from scratch with proper layers, classes and ID's and a LOT fewer lines of code (only about 150 now rather than 1000), this was mainly down to the article from PointC about saving SVG's from AI, which was brilliant, thanks. This itself resolved the issue with IE, animation was playing constitently smoothly, apart from the exception with the missing orange jumps, these still didn't appear.

- To solve the orange jumps not showing, I followed PointC's advice and added " stroke-linejoin:round" onto those elements, fixed the issue.

- One other issue I had was the animations wouldn't fire on a page reload, it would run once, then not again for some time. I discovered this was down to my browser caching plugin (W3 Total Cache). I added the animation JS to it's own file within my child theme, used wp_enqueue_script to load this file when the specific page was loaded and added the JS file to an exception list within the browser caching plugin. This stopped it being added to the browser cache, meaning it would load from the server each time and now fires consistently.

 

Again, thank you both a lot for your help with this, I couldn't have fixed this without your help.

 

@Carl  @PointC

  • Like 2
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.
×