Jump to content
GreenSock

erikb

ie edge slow performance when tweening opacity on svg

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

In IE Edge, noticed this pen is very slow (but fine in ffox and chrome).  Figured out this performance hit disappears when removing the tweening of the opacity of the line elements.  To keep the effect of the animation fading in/out, I experimented and found I can instead tween the opacity on the parent element #map, and performance is great.  I suspect this is an IE Edge issue.  Maybe there is someone at Microsoft you can push?

 

I am posting here because it is very far and inbetween I encounter a performance snag when testing your library and was reminded of the old star-trek / star-wars hyperspace demo you used to have showing how great performance was with a jajillion elements moving at once.  I figured you would want to know when the experience was not stellar.  

 

See the Pen MKmGpj?editors=101 by jedierikb (@jedierikb) on CodePen

Link to comment
Share on other sites

Is there a difference in quality if you use "autoAlpha" instead of "opacity"?

Link to comment
Share on other sites

Unfortunately there are certain things that we simply have no control over, and browser rendering is one of those. As you suspected, it sounds to me like an issue with the browser itself not handling that particular scenario well (a performance bug). I'd be curious if it helps at all for you to merge the opacity tweening into the actual color tweening that you're doing. In other words, delete the "opacity" stuff altogether and just tween from stroke: "rgba(0,0,255, 0)" to stroke: "rgba(0,0,0,1)". 

  • Like 2
Link to comment
Share on other sites

I would submit your bug to Microsoft. MS Edge has been littered with new display rendering bugs... oh joy!

 

https://connect.microsoft.com/IE/Feedback

 

And their twitter ms edge account

 

https://twitter.com/MSEdgeDev

 

Thank you Microsoft for giving us a new browser and rendering engine that behaves much worse than IE.

 

:)

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