Jump to content
GreenSock

elegantseagulls

Chrome Bug - Display: None Breaking GSAP Animation

Recommended Posts

Running into something super strange. I have a site with two nav menu actions that I wanted to control a single timeline. When you click the hamburger then resize the other menu hamburger crops in an unexpected way.

 

To replicate: toggle the menu and resize the screen (the breakpoint is at 900px). Any ideas what's causing this?

 

 

See the Pen xPWdLZ by ryan_labar (@ryan_labar) on CodePen

Link to comment
Share on other sites

I think you may have to take another approach to how you are nesting the svgs in buttons as something is clearly being shifted at the smaller break point. Not really sure its even necessary to have a mobile button and desktop button as they appear to do the same thing. Unfortunately I really can't dig into a better way.

 

I separated each item just so you can see that GSAP isn't doing anything differently to the 2 svgs. Identical animations at both break points:

See the Pen KyoXVG by GreenSock (@GreenSock) on CodePen

 

  • Like 3
Link to comment
Share on other sites

Thanks, @Carl. I dove a bit deeper and think the issue is stemming from the `display:none;`. I updated the pen without buttons wrapping to confirm this. 

Any suggestions?

 

Link to comment
Share on other sites

Found a Solution. I ended up defining the SVG as a symbol and displaying it using `use`.  Seems to break if I I add display none to the sprite SVG

 

 

See the Pen mqxBBB by ryan_labar (@ryan_labar) on CodePen

 

Link to comment
Share on other sites

Ok, diving even deeper, it def seems to be a bug in Chrome-based browsers. I tested this in FireFox and it works great. It breaks in Chrome and Safari. See simplified new pen: 

 

See the Pen dZmJba by ryan_labar (@ryan_labar) on CodePen

 

Link to comment
Share on other sites

Glad you narrowed it down.

 

You'll have to look into the SVG spec to see what the proper behavior is, but its kind of dangerous setting something to be display:none; and then trying to do things to it like measure it or set a transform-origin. SVGs that aren't in the render tree can be problematic. FireFox has been known to throw a fit if you try to measure strokes of elements with display:none. try visibility:hidden instead.

  • Like 3
Link to comment
Share on other sites

Hello @elegantseagulls and Welcome to the GreenSock Forum!

 

The Mighty @Carl is right! The display none issue is not related to GSAP but is how display none works with SVG. In SVG any elements that use display:none or elements that are inside a <symbol> or <defs> element will not be directly rendered by the browser per teh spec. Since those elements will be removed from the render tree (DOM). 

 

See SVG display spec:

 

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/display

 

So like @Carl advised its better to use either the visibility: hidden CSS property or to use the visibility attribute for that element.

 

Happy Tweening :)

 

 

 

 

 

 

 

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