StackExchange / StackExchange/Stacks
Eliminate need for clip-path on `.s-expandable`
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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