A mid-year look at the Compat 2021 scores

Six months into the Compat 2021 effort, which targets five CSS focus areas, all three major browser engines have measurably closed interoperability gaps. The project tracks progress through a public dashboard built on web-platform-tests, where passing rates serve as a proxy for how consistently a feature behaves across browsers.

Flexbox: gap lands across engines

The headline change for flexbox is the arrival of the gap property in every major browser. Safari 14.1 shipped it, completing cross-browser support for a spacing feature that was a top request in the MDN Browser Compatibility Report. That same Safari release also fixed long-standing image sizing issues in flex layouts, removing the need for CSS workarounds that used to be required.

Elsewhere, Firefox fixed rendering of tables as flex items and now passes 98.5% of the targeted tests. Chromium addressed the same table issue and, in version 88, rewrote image handling inside flex containers to clear a batch of old bugs. Chromium engineers have also added the alignment keywords start, end, self-start, self-end, left, and right, which are available for testing in Canary builds of Chrome and Edge.

Grid: steady gains, new architecture

CSS Grid usage stands at 9% of page views and growing, which makes closing the compatibility gap a priority. All engines currently pass more than 89% of the relevant tests. Safari improved from 89% to 93% since the start of the year. Chromium is working through GridNG, an architecture rewrite led by Microsoft's team, which pushed its targeted Grid test score from 94% to 97%.

Sticky positioning clears a threshold

Chromium's TablesNG project, a re-architecture of table rendering, fixed sticky positioning for table headers. Combined with a few final bug fixes, this pushed Chrome and Edge on the developer channel to 100% of the targeted position: sticky tests. TablesNG resolved a total 72 Chromium bugs beyond the sticky-header case.

Zeroing in on aspect-ratio

The aspect-ratio property, already valuable for responsive layouts and preventing cumulative layout shift, is now available in stable Chrome, Edge, and Firefox, plus Safari 15 beta. It shows the smallest compatibility gap of the five focus areas. Every major browser passes more than 90% of the dedicated tests, and usage is trending up as support matures.

Transforms: smaller moves

Results for the CSS transforms test suite are improving gradually, helped by a mix of browser fixes and better tests. The Chromium team is working on transform-style: preserve-3d and the transform: perspective() function, with more detail expected in the next update.

Overall score movement

Since the March announcement, the engines' composite Compat 2021 scores have risen as follows:

  • Chrome and Edge Dev: 86 to 92
  • Firefox: 83 to 86
  • Safari: 64 to 82

Safari's 18-point jump is the largest of the group, attributable to significant WebKit contributions, including work on aspect-ratio, flexbox gap, and multiple Grid fixes.

Tracking the effort

Live progress is available on the Compat 2021 dashboard. For discussion and updates there is a public mailing list, and compatibility problems can be reported directly to the affected browser vendors. The Chromium improvements described here reach Chrome, Edge, and all Chromium-based browsers.