TL;DR
For years, Chrome had a quirk that made position: sticky headers go haywire when combined with display: inline (or display: inherit) and nested sticky elements. A new layout fix by Developer Eldar Pulatov tackles the root cause, so you can retire the workarounds.
Every developer has been there
You build a clean sticky header. It works in Firefox. It works in Safari. Then you open Chrome, start scrolling, and watch it drift, jump, and refuse to stay pinned like it has a mind of its own.
That’s essentially what one developer reported in issue 372503461, and their description was perfect: the sticky header “comes crazy.”
The problem
The trigger was a specific combination:
- A <header> with position: sticky
- A display value of inherit (which resolved to inline)
- A flex-based inner element with its own sticky-like behavior
Put those together and Chrome’s sticky positioning fell apart. The bug reproduced across Canary, Dev, Beta, and Stable, on Mac, Windows, and Linux. It traced all the way back to at least Chrome M119, which made it a long-standing bug rather than a recent regression.
Then a contributor did what great bug reporters do: they boiled it down to the essentials. Their reduced test case showed that all it took was a sticky element with an inline display type containing another sticky child. That pointed straight at how Chrome’s layout engine handled sticky boxes nested under sticky inline elements.
The fix
A Chromium engineer went after the underlying problem rather than the symptoms. The patch, titled “[Layout] Fix sticky boxes under sticky inlines,” updates the layout logic to use Container() for a full traversal of ancestor geometry. It also stores range endpoints and recomputes the nearest sticky ancestors on demand, instead of relying on assumptions that broke down in nested inline cases.
After the patch landed in chromium/src, a verifier tested it on a later Canary build across macOS, Windows, and Linux. It passed everywhere, and the bug was marked verified and closed as fixed. The fix was also linked to a related bug believed to share the same root cause. You can learn more about the technical implementation of the fix on github.
Demo video provided by Eldar Pulatov
Why this matters for your code
The Bug Bounty Program focuses on real, user-facing bugs, and this one fits the bill. Here’s what the fix means in practice:
- Fewer hacks. Sticky headers combined with unusual display values, such as inherit resolving to inline or nested sticky elements, should now position correctly in Chrome. No more workarounds for this combination.
- Bonus fixes. Because the patch addresses the root cause rather than the one reported markup, it should also resolve the related bug and likely other undiscovered cases that shared the same flaw.
One fix, many headaches gone.
Your turn: fix a bug, get paid
The Supporters of Chromium-Based Browsers is dedicated to making Chromium better for the developers, users, and browsers that depend on it every day. Through our Bug Bounty Program, you pick a bug from one of our approved lists, submit a fix, and get paid:
- Small bugs: $1,000 for targeted fixes with clear user benefit, on the BugBounty-Small hotlist.
- Medium bugs: $5,000 for moderate-impact issues, on the BugBounty-Medium hotlist.
- Large bugs: $20,000 for high-impact bugs with broad user or developer visibility, on the BugBounty-Large hotlist.
Bugs like this one don’t fix themselves. Maybe the next win is yours.
Ready to fix your first bug? Learn how to get involved