A Frehner Site

Fixing Container Queries in WebKit

Previously on... #

In my last blog post, I spent some time playing around with Container Style Queries and noted in the browser notes section that Safari had a broken implementation. I didn't realize it at the time, but I would end up fixing that bug myself.

Container queries and shadow DOM #

While working on container queries and responsive values for our web components, I discovered a huge flaw in my plan: not only do named container queries not work across the shadow DOM, but also each browser had a completely different level of support. Take a look at how each browser renders (at the time of writing this blog post) the code from this codepen:

Safari #

First line of text says: 'Text will be blue if container query applies'. Then an additional four lines of text. The first is black and says 'container query'. The second is black and says 'named container query'. The third is blue and says ':host container query'. The fourth is black and says ':host named container query'.

Chrome #

First line of text says: 'Text will be blue if container query applies'. Then an additional four lines of text. The first is blue and says 'container query'. The second is black and says 'named container query'. The third is blue and says ':host container query'. The fourth is black and says ':host named container query'.

Firefox #

First line of text says: 'Text will be blue if container query applies'. Then an additional four lines of text. The first is blue and says 'container query'. The second is blue and says 'named container query'. The third is blue and says ':host container query'. The fourth is blue and says ':host named container query'.

Specs? #

The only thing consistent across browsers was putting the containing element styles on the :host pseudo class, which is what we ultimately did for our query container component.

I wasn't happy with this inconsistency. Shouldn't there be a spec and WPTs for how container queries work in shadow roots?

The answer to both of these is yes! The spec does clarify how container queries work across shadow roots (called the "flat tree" in CSS). Additionally, there are WPTs to validate this behavior. The only bit of ambiguity left was whether it was intentional that named container queries behaved differently than unnamed container queries across shadow roots, and hopefully there's some clarity gained there soon.

That meant I could focus on the implementation without fixing specs or adding WPTs first.

Working in WebKit #

I decided to fix WebKit's implementation so everyone could use unnamed container queries across the shadow DOM. Thankfully, my coworker Yoav Weiss had recently published an article on how to push a web platform feature, and there's even a specific section on how to work in WebKit! Perfect.

After getting help from the WebKit Slack and lots of experimentation, I submitted a PR to fix WebKit's implementation of container queries across shadow roots. Even better, I then realized that my work on regular container queries also fixed the container style queries feature I mentioned earlier; it turns out that WebKit's implementation for figuring out container queries and container style queries uses the same block of logic, which both makes sense and is super convenient.

[Edit] I've added a page of notes for helping me with common tasks and commands when working on the WebKit source. See it here.