Chrome Bug - Display: None Breaking GSAP Animation

[elegantseagulls]

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

[Carl]

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

 

[elegantseagulls]

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?

 

[elegantseagulls]

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

 

[elegantseagulls]

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

 

[Carl]

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.

[Jonathan]

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