Topic

CSS Layout, Overflow & Cascade

A sticky element killed by one `overflow` on body, a grid wrecked by a `display:none` item, and specificity quietly beating your 'global' component. This cluster collects real CSS bugs and how to trace them in DevTools, not cascade theory from the spec. For when your layout is 'almost right' but one pixel refuses to obey.

16 articles

Start here

`overflow-y: auto` on `body` Silently Kills Every `position: sticky`? The Body Became a Scroll Container

Scrollytelling sections refuse to pin and render blank? overflow-y auto on body kills position sticky. Switch to overflow-y visible plus overflow-x clip.

A ~24px White Strip Above a Full-Bleed Hero in a Block Theme? It's `--wp--style--block-gap`
July 12, 2026
`max-height: 0` Accordion Still Leaks a Sliver? Padding Sneaks Through `overflow: hidden`
July 11, 2026
Product Cards Shrink to 240px on Desktop? A `display:none` Grid Item Breaks Column Auto-Placement
July 7, 2026
SVG Icons Squished, Circles Rendering as Ellipses in Some Slots? `preserveAspectRatio` `none` Stretches Non-Uniformly
July 4, 2026
Shortcode Layout Inside `display: grid` Explodes on the Live Site? `wpautop` Injects Empty `<p>` Tags as Phantom Grid Items
July 1, 2026
Two Equal-Height Columns Without JavaScript: Grid Stretch + Flex Distribute
June 27, 2026
Swapped One Color `--token` but the Old Color Persists: Hardcoded Hex in JS Bundles & SVG
June 27, 2026
`overflow-x: hidden` Kills `position: sticky` on iOS Safari, Switch to `overflow-x: clip`
June 26, 2026
Your CSS Class Toggle Won't Show the Element? The HTML `hidden` Attribute Is `display:none`
June 26, 2026
Gradient Text With `background-clip: text` Clips the Descenders (g, p, q, y), Here's the Fix
June 26, 2026
Leaflet Map Controls Leak Above Your Sticky Header, Fix It With a Stacking Context
June 26, 2026
A GoHighLevel Form Goes Invisible (White-on-White) After Flipping the Theme Dark↔Light
June 25, 2026
A Page-Scoped CSS Override Silently Beat My 'Global' Component on Specificity
June 18, 2026
A Duplicate `style=` Attribute on One Element, The Browser Silently Keeps Only the First
June 11, 2026
A Nested `<a>` Inside Another `<a>` Silently Collapsed My Card Grid
June 10, 2026

`overflow-y: auto` on `body` Silently Kills Every `position: sticky`? The Body Became a Scroll Container

A ~24px White Strip Above a Full-Bleed Hero in a Block Theme? It's `--wp--style--block-gap`

`max-height: 0` Accordion Still Leaks a Sliver? Padding Sneaks Through `overflow: hidden`

Product Cards Shrink to 240px on Desktop? A `display:none` Grid Item Breaks Column Auto-Placement

SVG Icons Squished, Circles Rendering as Ellipses in Some Slots? `preserveAspectRatio` `none` Stretches Non-Uniformly

Shortcode Layout Inside `display: grid` Explodes on the Live Site? `wpautop` Injects Empty `<p>` Tags as Phantom Grid Items

Two Equal-Height Columns Without JavaScript: Grid Stretch + Flex Distribute

Swapped One Color `--token` but the Old Color Persists: Hardcoded Hex in JS Bundles & SVG

`overflow-x: hidden` Kills `position: sticky` on iOS Safari, Switch to `overflow-x: clip`

Your CSS Class Toggle Won't Show the Element? The HTML `hidden` Attribute Is `display:none`

Gradient Text With `background-clip: text` Clips the Descenders (g, p, q, y), Here's the Fix

Leaflet Map Controls Leak Above Your Sticky Header, Fix It With a Stacking Context

A GoHighLevel Form Goes Invisible (White-on-White) After Flipping the Theme Dark↔Light

A Page-Scoped CSS Override Silently Beat My 'Global' Component on Specificity

A Duplicate `style=` Attribute on One Element, The Browser Silently Keeps Only the First

A Nested `<a>` Inside Another `<a>` Silently Collapsed My Card Grid