A web page isn’t locked in stone just because it has rendered visually. Media assets, like images, can come in and cause the layout to shift based on their size, which typically isn’t known in fluid layouts until they do render. Or fonts can load and reflow layout. Or XHRs can bring in more content to be placed onto the page. We’re always doing what we can to prevent the layout from shifting around — that’s what I mean by layout jank. It’s awkward and nobody likes it. At best, it causes you to lose your place while reading; at worst, it can mean clicking on something you really didn’t mean to.
While I was trying to wrap my head around the new Layout Instability API and chatting it out with friends, Eric Portis said something characteristically smart. Basically, layout jank is a problem and it’s being fought on multiple fronts:
- Fight the problem at the content/authoring level: We now have
intrinsicsizeas an HTML attribute andaspect-ratioas a CSS property. Both are designed for this fight, although they don’t really have great browser support yet, requiring DIY aspect ratio boxes intead. Plus, ideas like this change to UA stylesheets to widen the effectiveness of aspect-ratio. - Fight the problem at the browser behavior level: Scroll anchoring is designed to do this as well. The fact that it’s now enabled by default is a big deal. It’s also still possible to control it with CSS if you need to, via
overflow-anchor. - Measure the problem and the causes: The Layout Instability API is designed for this, presumably to enable tooling that monitors it.
In some five years, this issue will be gone, and we’ll tell stories about how the web used to be all janky and jerky.
No, in five years it will be more spread-out.
Jank will be removed entirely for some user experiences and others will have their jank exacerbated by developers trying to make their own display layout modes with the Houdini Layout API by firing off expensive calculations every time a scroll event is fired instead of following an established set of guidelines that works on everything except Safari.