The Mason's Mortar: On the Invisible Bedding of a Contiguous Paint

There is a quiet moment in good masonry, after the stone is set but before the whole wall bears weight, where the mason checks the bedding. The unseen mortar must fill every gap, must connect each unit to its neighbor without a void. A hollow spot means a point of future fracture, a weakness invisible from the finished face. Our documents, too, have their bedding. When the browser paints the pixels to the screen, it does so in what it calls "paint rectangles." And if our styling creates a gap in those rectangles—a sliver of unpainted space between two elements—the renderer must stop, recalculate, and start a new painting operation. It's a tiny, silent fracture in the rendering path. The technique, then, is not about painting more, but about painting contiguously.

You’ve likely caused this without knowing. Consider a common component: a card. You have a heading, an image, a block of text, and a footer link. You want a subtle, separate background for that footer. So you apply `background: white;` to the footer element, while the main card body has `background: #fafafa;`. Visually, perfect. But to the renderer, you have just created two separate paint rectangles: one for the light grey body, and a new, distinct one for the white footer. Even if they touch perfectly on screen, they are separate painting operations. The renderer must finish the first, shift its context, and begin the second. It is a microscopic layout thrash, a hesitance in the wall's construction.

Bedding the Joints with a Unified Field

The remedy is to think like the mason, and ensure the bedding—the background—flows uninterrupted behind the entire component. Instead of applying the background to individual children, apply a single, unified background to the parent container. Then, use other means—borders, shadows, pseudo-elements—to create the visual distinction for the child elements. For our card, we give the entire card the `background: #fafafa;`. For the footer's white bar, we forgo a direct background and instead use a clever trick: an `::after` pseudo-element on the footer itself, absolutely positioned and inset to `0`, with a `background: white;` and a `z-index: -1;`. This creates the visual separation while keeping the paint rectangle of the main card wholly intact. The footer's visual backdrop is painted as part of the same layer, nestled within the parent's paint area.

The effect is not measured in seconds saved, but in the elimination of countless, pointless painting commands. It is the difference between the mason laying a continuous bed of mortar and patching in little blobs later. The wall becomes a single, coherent structure. In browser terms, you reduce the number of paint operations and, more importantly, you avoid interrupting the paint stream with new layer creation. The pixels hit the screen in a more contiguous flow, reducing the risk of jank during scrolling or animation. It is a practice of subtle unification, of seeing the document not as a collection of disparate boxes, but as a woven surface where the backing cloth should be as seamless as we can make it. We fill the hollow spots before the weight of interaction and time finds them.

Notes & further reading

A few pages I came back to while writing this: