Jump to content
GreenSock

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

stroke-linecap and drawSVG issue in IE11 and Edge

Go to solution Solved by GreenSock,

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 hit a strange DrawSVG issue on my latest project. I was hunting every line of JS thinking I was doing something wrong, but I finally narrowed it down to the SVG stroke-linecap.

 

If I set the stroke-linecap to 'round' or 'square', IE11 and Edge won't display the stroke as it animates. DrawSVG is animating all the values, but those two browsers display nothing. The weird thing is if I animate a new value for the strokeWidth along with the drawSVG animation, it works perfectly. Even a 1/1,000th change makes it work. Any strokeWidth value works as long as it isn't the same as the original value in the SVG. Another oddity is setting the stroke-linecap to 'butt', 'inherit' or leaving it out causes no problems either. 

 

All is fine in Chrome and FF, but the Microsoft browsers are behaving like fussy children.

See the Pen KWrmJX by PointC (@PointC) on CodePen

Link to post
Share on other sites

I see this same thing happen on Windows in 10 latest Ms Edge and IE11 Craig. So i can confirm i tested and get the same results a s you Good Sir.

 

Lets see what the Grandmaster's Jack and Carl find about this behavior.

 

Not sure if its related to this previous IE11 SVG bug

 

https://connect.microsoft.com/IE/feedback/details/801938/dynamically-updated-svg-path-with-a-marker-end-does-not-update

 

:)

  • Like 1
Link to post
Share on other sites

Great catch, Craig. Gotta love those Microsoft browsers ;)

 

Here's what I discovered:

  • You’re right - GSAP is animating things properly but the browser just isn’t rendering the changes to the screen. 
  • If stroke-linecap is “round” and you ALSO set stroke-linejoin to “round”, it fixes things. 
  • Changing the stroke-miterlimit or stroke-width will also trigger a repaint (meaning it’d have to change on every tick). That’s why things worked when you animated the strokeWidth. 
  • It’ll also trigger a repaint if you set the “d” attribute of the path (even if you set it to its current value). However, that strikes me as likely not optimal performance-wise because it’d have to parse all the data again on every tick…
  • Since plenty of people won’t know to do any of the above, I added some code to DrawSVGPlugin to sense if it’s a Microsoft Edge browser (and the linecap and line join meet the conditions above), it’ll automatically add a strokeMiterlimit:“+=0.0001” tween internally. This should be imperceptible but effective. I hate animating properties that the developer didn’t specifically request, but in this edge case (get it “Edge” case??), it seems like it’s a decent solution that won’t cause too many problems for people. I can’t imagine folks will get bent out of shape by 0.0001. 

I have updated the bonus zip downloads as well as the codepen-specific one. 

 

There are plenty of tutorials online and open source libraries that help people create the "progressive drawing" effect, but I don't think any of them address all these cross-browser quirks. Hopefully this is the type of "automatic" workaround DrawSVGPlugin now delivers that makes it worth the price of the membership. There are probably 4 or more odd browser inconsistencies that DrawSVG fixes for you too. :)

 

Happy tweening!

  • Like 4
Link to post
Share on other sites

I see why adding stroke-linejoin also to round fixes this. Microsoft is really strict poopy pants. For example if you try to animate stroke-width and dont have the actual stroke-width attribute on the element your animating in IE11, it will ignore animating the stroke on that element. Even if you have the CSS equivalent.

 

Nice Solution Jack!

  • Like 4
Link to post
Share on other sites

That'll work. GSAP to the rescue! Thank Jack. :)

 

For anyone reading this now or finding it in future Google searches:

 

I highly recommend Club GreenSock and the bonus plugins. They will make your life easier by dealing with all this browser fussiness and nonsense. You'll also save a lot of time and if we all know one thing - it's that time = money. 

 

Happy tweening.

:)

  • Like 4
Link to post
Share on other sites
  • 1 year later...

Hello all!!!!

 

I am animating this SVG C with a circle mask that is drawing a stroke. Animation works well in all browsers except for Microsoft Edge. Can someone please let me know what I am doing wrong? Any help will be much appreciated. 

 

See the Pen PBgXPN by RitchieA (@RitchieA) on CodePen

 

Link to post
Share on other sites

Hi @hyconnect :)

 

It looked fine in Edge to me. I'm not sure what version of Edge you're using, but you can also try a slight rotation of the mask to force Edge to repaint. I wrote about that in our SVG Gotchas thread here:

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 3
Link to post
Share on other sites

@PointC Everything seemed to work inside codepen, on Edge, without a 0.01 rotation, but not my local file. Once I placed rotation: 0.01, inside my local project everything worked like a charm. Thank you for the point in the right direction!

  • Like 2
Link to post
Share on other sites

Happy to help and I'm glad it's working for you now. Edge can be such a fussy pants.

 

This is my usual reaction to working with Edge and its diva nonsense.

Vao5SLn.gif

  • Like 1
  • Haha 1
Link to post
Share on other sites

@PointC Thats about right. Besides the rotation rendering issue, turns out the biggest issue was the Google CDN I was using for TweenMax... I was using this dated CDN: <script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.20.0_d360d9a082ccc13b1a1a9b153f86b378_min.js"></script>

 

instead of 

<script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.20.4_3dc5474a75410cb768741e402b80d908_min.js"></script>
 
 
It would be nice if I could get notification every time this link was updated. Anyways, happy coding ?
Link to post
Share on other sites

Just so you know, Google updated to GSAP 2.0.1 and the URLs are listed at: 

 

The URLs are much more friendly now :)

  • Like 3
Link to post
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.

×