Browser vendors target five CSS pain points for 2021

Google, Microsoft, Mozilla, and Igalia are joining forces this year to fix the most persistent cross-browser compatibility issues facing web developers. The initiative, called #Compat 2021, focuses on five specific areas: CSS flexbox, CSS Grid, position: sticky, the aspect-ratio property, and CSS transforms.

The project grows out of research conducted through the MDN DNA surveys and the MDN Browser Compatibility Report 2020, along with data from State of CSS, State of JS, and other sources. The goal is to make these features reliable enough that developers can adopt them as stable foundations rather than treating them as compatibility risks.

How the focus areas were chosen

The selection process weighed several factors across the candidate features:

  • Usage data: Flexbox, for example, appears on roughly 75% of page views according to Chromium usage metrics.
  • Bug volume: Both the number of open bugs in Chromium, Gecko, and WebKit, and for Chromium, the number of stars those bugs have received.
  • Survey results: Developer feedback from the MDN DNA surveys and the Browser Compatibility Report.
  • Test coverage: Results from web-platform-tests, which reveal where implementations diverge.
  • Search interest: Features developers frequently look up on Can I use.

The five focus areas

CSS flexbox

Flexbox is the most widely used of the five features, yet it still has significant gaps. A notable example is incorrect sizing of images inside flex containers with auto-height, which has affected both Chromium and WebKit. Igalia has documented these problems in detail, including many concrete examples of broken layouts.

The motivation for addressing flexbox is clear: it ranks as the top issue in the MDN Browser Compatibility Report, and while test pass rates are at 85% across browsers, the remaining failures affect a feature used on three-quarters of all page views.

CSS Grid

Grid has become a core layout tool, but it still lacks feature parity among browsers. The most notable gap is animating grid layouts, which works in Gecko but not in Chromium or WebKit. Supporting this would enable smooth, animated transitions between grid states.

Grid is the runner-up in the MDN compatibility report and currently sees about 8% usage with steady growth. Test pass rates hover around 75% across browsers.

CSS position: sticky

Although sticky positioning is supported in all major browsers, common use cases still fail in practice. Sticky table headers, for instance, are not supported in Chromium — the feature exists behind a flag but behaves inconsistently across browsers when enabled.

The feature is highly used, appearing on roughly 8% of page views, and test pass rates sit at only 66% across browsers, leaving substantial room for improvement.

CSS aspect-ratio

The aspect-ratio property offers a way to preserve an element's width-to-height ratio without relying on the traditional padding-top hack. This is expected to drive broad adoption, making it important to ensure the implementation is solid across all browsers and scenarios from the start.

The property is already well known but not yet widely used, and test pass rates are remarkably low at just 27% across browsers. Usage currently stands at 3% but is poised to grow.

CSS transforms

Transforms have been supported for years, yet inconsistencies persist — especially around animations and 3D transforms. A common effect like a card flip can render very differently depending on the browser. This is the most-used feature of the five, appearing on 80% of page views, with a test pass rate of just 55%.

Tracking progress and getting involved

Developers can follow the initiative through the Compat 2021 mailing list or via @ChromiumDev on Twitter. Regular progress updates will be published on web.dev, and each focus area has a dedicated section in the Compat 2021 Dashboard.

Those encountering compatibility bugs should file them using standard bug reporting channels. If an issue is already documented, adding details to the existing bug helps prioritize fixes.