Jump to content
Search Community

Issue with animating stroke-dashoffset in IE

operaman_22 test
Moderator Tag

Go to solution Solved by operaman_22,

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 need to create a speed gauge with SVG animation. I began by using VelocityJS, but when I tested in IE I realised that IE ignores `transform-origin` so that the needle on the gauge would not rotate correctly.  I've been exploring alternatives and discovered that both SnapSVG and GSAP are better suited to my needs. However, they both suffer another problem in IE.

 

In addition to the gauge's needle rotating, I need an arc around the gauge face to follow the path of the needle. (See my CodePen for clarification.) I animate `stroke-dashoffset` to create this effect. It works beautifully in FF and Chrome. However, in IE10/11 it seems to draw some other shape.

 

Any help would be most appreciated. Thank you.

See the Pen zvKrMa by anon (@anon) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Honestly, I wasn't seeing anything weird with the GreenSock version on IE10. 

GreenSock's solution for animating SVG strokes is our DrawSVGPlugin: http://greensock.com/drawSVG

DrawSVGPlugin will guarantee the widest browser support with a very simple API (see video in link above)

 

I updated your demo to use it, and I'm not seeing any problems: http://codepen.io/anon/pen/NGRzxj?editors=001

 

DrawSVGPlugin is available with all Club GreenSock memberships: http://greensock.com/club/ 

  • Like 2
Link to comment
Share on other sites

I'd gladly tell you that you don't need DrawSVG because it looks to me that your demo works in IE10. I just don't know what alternate solution I would suggest.

If you can supply a screenshot of what you are seeing or anyone else has ideas, that's totally fine. 

  • Like 1
Link to comment
Share on other sites

I see the problem in IE, and it looks like that is one of the issues the DrawSVG plugin fixes for IE.

 

Try using Beziers. I got this working in IE without the plugin.

 

 

See the Pen jPRbjL by osublake (@osublake) on CodePen

 

If Beziers don't work, try animating the arc like this.

 

See the Pen doLyvQ by osublake (@osublake) on CodePen

  • Like 2
Link to comment
Share on other sites

Thank you both for your help!

 

I persuaded my boss to pay for membership so that I could use the plugin.  I installed it, ran my script, and...

 

...the same issue is occurring!!!

 

I set up a new codepen to illustrate the problem (

See the Pen epgQQw by anon (@anon) on CodePen

), but my simulated test works perfectly there.

 

The only differences between my actual project and the codepen is that I measure real speed values instead of generating them randomly. Aside from branding and a P tag to hold the speed value, the UI is identical. There is no other SVG, animated or otherwise, on the page. So, I suspect the plugin script.

 

Although both the codepen version of the plugin and the one I download claim to be version 0.0.6, there seem to be differences between the two scripts (besides where it checks for use in a codepen). So, I set up yet another codepen, using the plugin script I downloaded when I paid for membership (

See the Pen PPWVbY by anon (@anon) on CodePen

): The bug is back!

 

How can I get a bug-free version of the plugin?  Thanks.

Link to comment
Share on other sites

I think this has to do with the code running in codepen through an iframe in IE. IE treats iframes differently. I tried running the code in codepen in debug  mode which does not use an iframe. And the animation played fine.

 

Tested in both IE10 and IE11 on Windows 7 (64-bit)

 

http://s.codepen.io/anon/debug/epgQQw?

 

in your codepen URL link just change the word /pen/ to /debug/

 

I notice that a lot of stuff that might not work in codepen or jsfiddle, usually works ok when on a regular remote or local server environment. Due to having the code run through an iframe which can cause issues and will throw a lot of cross-origin and cross-domain warnings and errors. Hopefully the new HTML5 iframe API will solve some of these issues allowing cross-origin and cross-domain hoopla.

 

When in doubt run the code in codepen debug mode.. if it works there and not in regular editor or full mode. Then that means the code running through the iframe is the issue, which is what i see with your example.

  • Like 1
Link to comment
Share on other sites

I think perhaps you didn't see both my pens.

 

The first pen (

See the Pen epgQQw by anon (@anon) on CodePen

) works perfectly in all tested browsers. It uses the special codepen version of the plugin.

 

The second pen (

See the Pen PPWVbY by anon (@anon) on CodePen

) does not work in IE, whether in an iframe or not. It uses the version of the plugin I downloaded when I purchased membership.

Link to comment
Share on other sites

Real quick, are you minifying or processing our files in any way? I compared your source to ours and the formatting seems a bit out of whack with weird tabs and whitespace issues. If not I wonder if something is happening on your server. 

 

Please test this version in IE: http://s.codepen.io/GreenSock/debug/GprVVz? Does that work any better. It has a freshly downloaded version of DrawSVG

Link to comment
Share on other sites

Hi Carl, thanks for your responses. I've tested your new codepen, and the issue is still there. The behavior is the same whether in the /codepen iframe or busted out in /debug. Are you not able to see the issue in IE?  I've tested in IE10, 11, and Edge, and the bug is there in all three.

 

I've not made any modifications to the plugin file I downloaded. I simply extracted it directly from the ZIP archive ("GreenSock-BusinessGreen-js.zip\GreenSock-BusinessGreen-js\src\minified\plugins - ZIP archive, unpacked size 1,348,076 bytes") to the directory I use.  The file is minified, of course, but that was done on GreenSock's end.

 

What I find odd is that the version for exclusive codepen use (//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=5) works beautifully, but the downloaded one, despite having the same version number, does not. Comparing the two, I see a difference where the code validates for codepen usage and redirects if not, naturally, but I also see other differences throughout the code. Clearly, despite the identical version number, these are not both version 0.0.6, and I think therein lies the problem.

 

Thanks.

Link to comment
Share on other sites

To help you further, what is the Windows version you on, and IE version and build number.. the build number and version is found under the IE About menu link.

This way we can test in the same environment since I'm not seeing the issue on PC Windows 7 (64 bit) ...

 

IE11

Version 11.0.9600.17914

Update Version: 11.023

Thank you for your patience operaman_22!

Link to comment
Share on other sites

Hi Jonathan,

 

I am using IE 11.0.9600.17914 on Windows 7 Home Premium (64 bit). I also emulate IE 10 through the F12 Developer Tools.

 

One colleague has tested on IE 11.0.9600.18015 on Windows 7 Enterprise Edition (32-bit) and on Edge 20.10240.16384.0 on Windows 10 Enterprise Edition (64-bit).

 

Another colleague has tested on IE 11.0.9600.18015 on Windows 7 Home Premium (64-bit).

 

All of us see the same issue with the second codepen (

See the Pen PPWVbY by anon (@anon) on CodePen

).

Link to comment
Share on other sites

I am so sorry about that, operaman_22. You're totally right of course and for some really strange reason, there was one line commented out and its sole purpose was to work around an IE bug. Calling getBBox() on the element forces IE to redraw it properly. That shouldn't be necessary, of course, but hey, add it to the list of annoying browser inconsistencies. 

 

You can download the latest zip and it has that line in place (uncommented) and working. Please accept my apologies for the hassle and delay. We've been going pretty nuts with this MorphSVGPlugin stuff which we're really excited about. 

 

Happy tweening!

  • Like 3
Link to comment
Share on other sites

That sounds like the Firefox bug that throws that error if you try to animate something that's either not in the DOM yet or has display:none. That's not really something we can "fix" - the only solution I can think of is for you to make sure you're not trying to animate something that's not in the DOM or has display:none. Hopefully Firefox will fix that bug soon. If that's not the issue, it'd be super helpful if you could provide a reduced test case in codepen or something so we can analyze it further. I tried your original codepen and didn't see any such error.

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