A year-end scorecard for browser compatibility

Compat 2021, the cross-browser effort to close interoperability gaps in five priority CSS areas, is wrapping up with all major engines now passing more than 90% of the project's test suite. That's a notable jump from where Chrome, Edge, Firefox, and Safari started the year.

The five focus areas—Flexbox, Grid, position: sticky, aspect-ratio, and CSS transforms—were chosen because they underpin a large share of modern layout work, and each saw meaningful fixes land across engines in 2021. Igalia contributed to all five areas, and the project's test results are publicly visible on wpt.fyi, with per-browser diff views showing progress since the mid-year update.

Flexbox closes gaps in sizing and alignment

The flex-basis: content keyword is now on track for universal support: implementations landed in both Chromium and WebKit, joining Gecko, which already supported it.

Chromium also resolved a flexbox sizing bug to match the spec and Firefox's behavior. Gecko fixed several Compat 2021-related issues, including one involving percentage heights on flex items. WebKit added support for additional alignment values—left/right, self-start/self-end, and start/end—and improved handling of absolutely positioned flex children, which also boosted its Flexbox test results.

Grid gets a rewrite in Chromium

Grid usage continues to climb, per both the 2021 Web Almanac and Chrome's usage metrics. The biggest single event was GridNG, Microsoft Edge's ground-up reimplementation of Grid layout, which shipped in Chrome and Edge 93 and closed 38 Chromium issues. Chromium's Grid score improved by 3% to 97% as a result.

Elsewhere, Gecko fixed an absolute positioning bug, and WebKit landed a large batch of Grid fixes. Those efforts lifted Firefox by 1% and Safari by 3% on the Grid suite.

Sticky hits 100% in Safari

position: sticky became the first focus area where a browser—Chrome and Edge—reached a perfect score earlier in the year. Safari has now caught up. A series of WebKit fixes, most shipped in Safari 15, brought its sticky implementation to 100% on the project's tests.

Aspect-ratio: the long-awaited property lands

Final scores for aspect-ratio stand at 99% for Chrome/Edge, 97% for Firefox, and 95% for Safari. Much of the remaining work wasn't in the property itself but in how the width and height attributes map to a default aspect-ratio for embedded content and images. WebKit implemented that mapping for multiple element types, and Chromium added it for <canvas>.

Transforms: spec alignment and a cleaner test suite

transform: perspective(none) is now supported in Chromium, Gecko, and WebKit, making it straightforward to animate between a perspective and a flat view.

Chromium also brought transform-style: preserve-3d and the perspective property into spec alignment: both now apply only to child elements. That's a behavioral change worth testing if you use nested 3D scenes.

The large score increases all browsers saw in this area were driven mainly by corrections to the test suite itself—removing or fixing flawed tests—which gives a clearer picture of the remaining interoperability issues and helps guard against future regressions.

Where Compat 2021 leaves things

The project's stated goal was never just higher numbers. aspect-ratio is now universally supported after years of requests; Flexbox, Grid, and position: sticky all see growing real-world use and are demonstrably more interoperable than they were twelve months ago.

Work on the next iteration of the effort is already underway, with focus areas for 2022 being researched and discussed among browser vendors and contributors. An announcement is expected soon.