Chrome 148 introduces a long-awaited CSS improvement: `position: sticky` now tracks the nearest scrolling container per axis independently. This solves the classic problem of data tables needing both a sticky header (vertical axis) and a sticky first column (horizontal axis) simultaneously. Previously, wrapping a table in an `overflow-x: auto` container caused the wrapper to become the sticky reference for both axes, breaking vertical stickiness. The fix requires using `overflow: auto clip` on the wrapper instead of `overflow-x: auto`, preventing the wrapper from becoming a vertical scroll container. Firefox and Safari do not yet support this feature, and CSS `@supports` detection isn't available yet, but a JavaScript-based feature detection snippet is provided.

5m read timeFrom bram.us
Post cover image
Table of contents
# The Situation# The Change# See it in action# An Important Detail: Watch your overflow# Browser Support# Feature Detection# Spread the word

Sort: