Skip to content

Eliminate need for clip-path on .s-expandable #1142

@dancormier

Description

@dancormier

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugA reproducible problem with the Stacks codecomponenthelp-wantedIssues a person would like or needs help with

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions