DEV Community

Cover image for 5 CSS Bugs That Aren’t Really Bugs. Just Poorly Explained
John Munn
John Munn

Posted on

5 CSS Bugs That Aren’t Really Bugs. Just Poorly Explained

#css #frontend #webdev #developer

Some of the most frustrating problems in CSS aren’t errors. They’re design decisions, just badly explained ones.

You didn’t write bad code. You just stepped on one of CSS’s many invisible tripwires.

Here are five classic “CSS bugs” that aren’t bugs at all, and how to actually fix them.

1. You Can’t Animate max-height: auto

The Bug 

.collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.collapsible.open {
  max-height: auto; /* doesn't animate */
}
Enter fullscreen mode Exit fullscreen mode

Why It Happens

CSS can’t interpolate auto. It needs a fixed numeric value to animate between.

The Common "Fix"

People fake it with something like:

.collapsible.open {
  max-height: 1000px;
}
Enter fullscreen mode Exit fullscreen mode

But if your content grows or varies, it breaks.

The Real Fix

Use JavaScript:

element.style.maxHeight = element.scrollHeight + "px";
Enter fullscreen mode Exit fullscreen mode

It’s not pure CSS, but it works reliably.

2. position: sticky Isn’t Sticking

The Bug

You add position: sticky, and your element scrolls away anyway.

Why It Happens

Sticky breaks silently if:

  • A parent has overflow: hidden or overflow: scroll
  • No top, left, etc. is defined
  • The element has no room to "stick"

The Fix

  • Add top: 0 (or another direction)
  • Remove overflow from ancestor containers
  • Make sure there’s scroll space for it to stick against

3. z-index: 9999 Still Doesn’t Show Up

The Bug

You set z-index: 9999, but your modal is still hidden.

Why It Happens

You’re in a stacking context. A parent with position, transform, opacity < 1, will-change, or certain CSS filters creates an isolated layer. Your z-index can’t escape it.

The Fix

  • Inspect with Chrome DevTools (look for new stacking contexts)
  • Remove or relocate styles that isolate stacking
  • Move the element outside the context if needed

4. padding-top: 100% Doesn’t Use Height

The Bug

You expect padding-top: 100% to match the parent’s height. It doesn’t.

Why It Happens

Vertical padding is based on the element’s width, not its height. This is how aspect-ratio hacks worked before the aspect-ratio property existed.

The Fix

Use modern CSS:

.aspect-box {
  aspect-ratio: 16 / 9;
}
Enter fullscreen mode Exit fullscreen mode

Or if you still use the old method, at least know what it’s doing.

5. Inheritance Isn’t Always Inherited

The Bug

You assume text styles like font-size or color will cascade into buttons or inputs. They don’t.

Why It Happens

Many form elements (like button, input, etc.) don’t inherit all properties. And most UI libraries reset things aggressively.

The Fix

Be explicit:

button, input {
  font: inherit;
  color: inherit;
}
Enter fullscreen mode Exit fullscreen mode

Also get familiar with initial, inherit, and unset as values — they behave differently.

Final Thought

Most CSS "bugs" are really just misunderstood rules. Once you understand the specs behind them, they stop being landmines and start becoming tools.

The trick isn’t to memorize hacks. It’s to understand the invisible rules CSS is following, even when they don’t make intuitive sense.

That’s how you go from frustrated to fluent.

Top comments (0)