You Reached for a Link and the Page Moved and You Pressed Something Else, and the Reason Is That the Browser Was Never Told How Big a Picture Was
Last timeDoing It All Again
Content that arrives after the page is already drawn changes geometry, geometry means layout, and layout means everything already placed moves. The causes are a short list and so are the fixes.
What a shift actually is
A reader is part way down an article. A picture finishes loading above where
they are looking, the text moves down by two hundred pixels, and the sentence
they were reading is somewhere else.
Nothing unusual happened. Three lessons of machinery just worked correctly.
The picture had no declared size, so at layout time the browser reserved no
space for it, because it had no number to reserve. When the bytes arrived the
intrinsic size became known, which is a geometry change, which is the first
class from the previous lesson. Layout ran again. Everything after the picture
in the flow moved down by its height, and the new positions were painted.
| step | moment | what arrived | what moved | how far | what happened |
|---|---|---|---|---|---|
| 1 | 0.4 s | the markup and the stylesheet | nothing, this is the first paint | 0 | The baseline. Everything placed here was placed using only information the browser already had. |
| 2 | 0.9 s | the web font | every line of text, slightly | 4 | The fallback face was narrower, so lines rewrapped and the whole column settled by about four pixels. Small, and it affects almost the entire viewport. |
| 3 | 1.6 s | the hero image, no declared size | everything below it | 240 | The large one. A single element gaining a height of 240 pushes the entire rest of the document down by exactly that much. |
| 4 | 2.3 s | a banner inserted at the top | everything, again | 72 | The most annoying kind, because it happens after the reader has started interacting and is almost always inserted by code that could have reserved the space. |
The short list of causes
Nearly every shift in practice has one of five causes.
| the browser lacked a siz | the size was knowable in | the fix is a declared si | has a standard fix | |
|---|---|---|---|---|
| an image or video with n | 1 | 0 | 0 | 1 |
| content inserted above e | 1 | 0 | 0 | 1 |
| a font that swaps to dif | 1 | 1 | 0 | 1 |
| an element sized from da | 1 | 0 | 1 | 1 |
| an animation of width, h | 0 | 0 | 1 | 1 |
The font case deserves a note, because it is the one people find unfair. The
fallback face and the web face have different character widths, so the same
sentence occupies a different number of lines, so every block below it moves.
The fix is not to avoid web fonts; it is to choose a fallback with similar
metrics and to adjust its size and spacing so the two occupy the same space.
The lesson stops here
4 more paragraphs to go
You have read the opening. The rest of the argument, the problems that check whether it landed, and the lines worth keeping at the end all come with a plan.
The first lesson of every course in the library reads the whole way through, free, so you can see exactly what the rest of them are.
See the planThe contentsThis is the reading half
Starting the course gives you your own copy of it. Every idea on every page has problems standing under it, marked with a reason rather than a tick, and any sentence you do not believe can be opened and argued with. None of that can happen on a page nobody owns.
The contents