StackExchange / StackExchange/Stacks

Eliminate need for clip-path on `.s-expandable`

Open
#1,142 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug component help-wanted
Dominant language
TypeScript
Stars
672
Forks
107
Avg merge
2d 12h
Merged PRs (30d)
26

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the .s-expandable styles and review the linked CodePen and MDN explanation of clip-path stacking contexts. Remove the stacking-context issue while preserving the component's expandable behavior, then verify the affected examples or tests if the repository identifies them.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend
Issue type
Refactor
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.