{"id":8469,"date":"2026-02-06T10:52:02","date_gmt":"2026-02-06T15:52:02","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=8469"},"modified":"2026-02-06T10:52:03","modified_gmt":"2026-02-06T15:52:03","slug":"the-browser-hates-surprises","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/the-browser-hates-surprises\/","title":{"rendered":"The Browser Hates Surprises"},"content":{"rendered":"\n

We often treat the browser like a canvas \u2014 a blank slate waiting for us to paint pixels. But this mental model is flawed. The browser isn’t really a painter; it\u2019s a constraint solver<\/strong>.<\/p>\n\n\n\n

Every time you load a page, you enter a high-speed negotiation. You provide the rules (HTML & CSS), and the browser calculates the geometry. When you give it all the math upfront, the result feels magical: a stable, buttery-smooth experience.<\/p>\n\n\n\n

But when we force the browser to recalculate that geometry mid-stream \u2014 because an image loaded late, a scrollbar popped in, or a font swapped \u2014 we break the spell.<\/p>\n\n\n\n

We know this phenomenon as “Cumulative Layout Shift” (CLS), but really, it’s just jank<\/strong>. And jank doesn’t happen by accident. It happens because we surprised<\/em> the browser.<\/p>\n\n\n\n

To fix this, we need to stop fighting the rendering engine and start orchestrating it. But first, seeing is believing. Let’s look at exactly what it looks like when we get it wrong.<\/p>\n\n\n\n

A “Hostile” Web Site<\/h2>\n\n\n\n

I call what we’re doing in the demo below “hostile” because the code is indifferent to the browser’s needs. It treats the rendering engine like a bucket we can dump data into whenever it arrives.<\/p>\n\n\n\n

In the code below, you will see four distinct “surprises” that break the user experience:<\/p>\n\n\n\n

    \n
  1. The Sticky Header Collision:<\/strong> When you click “Jump to Section 2,” the browser scrolls correctly to the top of the element, but the title gets buried behind the fixed header.<\/li>\n\n\n\n
  2. Popcorn Loading:<\/strong> The text and images load independently. The layout jumps once for the text, and again for the image.<\/li>\n\n\n\n
  3. The Image Shift:<\/strong> The image isn’t reserved space. It pushes the text down when it finally arrives.<\/li>\n\n\n\n
  4. The Scrollbar Shift:<\/strong> When the content grows long enough, a physical scrollbar pops in (on Windows\/Linux), shifting the entire UI to the left.<\/li>\n<\/ol>\n\n\n\n

    \ud83d\udee0 The “Before” Demo<\/h3>\n\n\n\n