When overflow: clip with overflow-clip-margin fits decorative effects, and when it doesn't
The article explains how to keep a container non-scrollable while letting decorative effects like shadows or focus rings paint past its edge. Using overflow: clip with a small overflow-clip-margin expands the paint clipping area without creating a scroll container. The author advises against this pattern for interactive or accessibility-critical content, where a true scroll container or layout change is needed. It also notes that shadow rendering varies between browsers, so visual checks in target environments are necessary. A minimal test fixture is recommended to validate the behavior before applying it to a real component.
This is an AI-generated summary. ShortSingh links to the original source for the complete article.

Discussion (0)
Log in to join the discussion and vote.
Log in