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
We use the
clip-pathproperty on.s-expandableto 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 theclip-pathproperty we use here) altogether in favor of a simpledisplay: none/block.If we're feeling ambitious, we could do a top-to-bottom rewrite of
.s-expandableto either a) find a better CSS-based approach to animatingheight: 0/autoor b) animate height using JS.From MDN:
This codepen illustrates the stacking context issue: https://codepen.io/dc-so/pen/QWmJBmz?editors=1000