-
Notifications
You must be signed in to change notification settings - Fork 100
Description
We use the clip-path
property on .s-expandable
to allow for height animations. Lately, it seems like more trouble than it's worth, as it affects stacking contexts in undesirable ways. We should consider ditching the animation (and the clip-path
property we use here) altogether in favor of a simple display: none/block
.
If we're feeling ambitious, we could do a top-to-bottom rewrite of .s-expandable
to either a) find a better CSS-based approach to animating height: 0/auto
or b) animate height using JS.
From MDN:
Note: A computed value other than none results in the creation of a new stacking context the same way that CSS opacity does for values other than 1.
This codepen illustrates the stacking context issue: https://codepen.io/dc-so/pen/QWmJBmz?editors=1000