Skip to content

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

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

Activity

  1. added
    bugA reproducible problem with the Stacks code
    help-wantedIssues a person would like or needs help with
    on Oct 11, 2022
  2. ondrejkonec commented on Oct 13, 2022

    @ondrejkonec

    Hi @dancormier

    I tried to fix this bug by removing unnecessary styles from CSS. It also has a positive effect on the behavior of the component, when the content does not jump (the height does not flash when switching to the Radio / Checkbox button).

    You can find description in pull request #1145

    I will be glad for your feedback.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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