Circularity and Container Queries

Dan Donald edited this page Feb 12, 2018 · 8 revisions

This is how your browser renders websites:

A flowchart showing that: 1. HTML and CSS get loaded and parsed into the DOM+CSSOM; 2. selectors are run to get a “render tree”; 3. the layout process generates a “box tree”; 4. pixels are actually painted to the screen

Nice and linear, isn’t it?

This is how your browser renders websites on container queries:

The same flowchart, but with a giant loopy arrow added, connecting the “box tree” back to the “run selectors” process

Container queries alter a page’s layout conditionally — based on the page’s layout. In order to determine whether, say, a queried element is wider than 500px, we must first lay out the entire page. If we do — and the element is, say, 504px wide — our container query tells the browser to switch up some styles and re-layout some (maybe all) of the page, again. At which point:

  1. we've already done up to twice as much layout work as we’d normally have to
  2. because the layout changed, we’ll need to check again to see if the query is still true. If it isn’t — if our queried element has gone back to being narrower than 500px — we have to go back and run selectors a third time and, well, perhaps you can see where this is going.

By inserting a giant loop into a once-linear process, container queries pose three big problems:

  1. Browser engines, currently, are built to traverse this flow exactly once. Re-engineering them to be able to do loop-de-loops is non-trivial.
  2. A naive implementation would let authors write code that sent browsers around the loop INFINITY TIMES. Which is bad.
  3. Even a sophisticated implementation fundamentally requires the browser to do loops and run layout MULTIPLE (finite) TIMES. Which is to say, container queries are fundamentally slower than media queries, and specs and implementations need to be mindful of potential performance impacts — aka, not open a pandora’s box of janky layout performance.

Examples

It's worth collating here any specific instances people have found where circularity may be an issue. Having as close to real world examples may come in handy when we come to considering this issue in more depth.

Please add below!

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.