When the header and hero are both supposed to be the same dark color, a sub-pixel gap shows through the page body color, creating a visible "line" between them. This page kills that bug for good.
Scroll inside each frame and watch the boundary between the header and hero. On the left you'll see a thin cream line where the page body shows through. On the right, the dark flows continuously.
Scroll up and down a couple of times.
The header sits on top of a cream body background. When sticky positioning re-rasterizes, a 1px gap appears between header and hero.
This is the "seam line" bug — a sub-pixel crack of cream cutting across two same-colored sections.
Filler. Filler. Filler. Filler. Filler. Filler.
Filler. Filler. Filler. Filler. Filler. Filler.
Scroll up and down — no seam.
Three things working together: the wrapper background is dark too, the hero overlaps the seam by 1px, and the sticky header uses GPU compositing so it doesn't shift when re-rasterized.
The transition into the cream content section below the hero is the intentional one — the seam between dark and cream is no longer invisible, it's where you wanted it.
Filler. Filler. Filler. Filler. Filler. Filler.
Filler. Filler. Filler. Filler. Filler. Filler.
Set the body/html background to the hero color, not the page body color. This way if any seam DOES appear, the gap shows the same color, not cream.
.hero { margin-top: -1px } — physically covers the sub-pixel gap. Cheap insurance against rounding errors.
will-change: transform; transform: translateZ(0) on the sticky header. Promotes it to its own composite layer so the browser doesn't re-rasterize and shift sub-pixels on each scroll tick.
/* 1. HTML/body background covers any overscroll (Safari rubber band)
AND prevents the cream from showing through any seam */
html, body { background: #0d0d0b; }
/* 2. Hero overlaps the seam by 1px */
.hero {
background: #0d0d0b;
margin-top: -1px;
}
/* 3. GPU compositing on sticky header */
header.site {
position: sticky;
top: 0;
z-index: 50;
background: #0d0d0b;
will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
}
/* Content section below hero — explicitly cream */
main, .content {
background: #fafaf8;
}No gradient backgrounds at the seam. Gradients interpolate colors at edges. Even a 1px gradient stripe between header and hero will show as a slightly different color than the surrounding solid fills.
Test the scroll-up flow. The artifact only appears AFTER scrolling down and back up. A single scroll test won't catch it.
Watch for overflow:hidden + sticky. Some browsers clip sticky elements when an ancestor has overflow: hidden. Move the sticky element higher in the tree if you see this.
iOS rubber-band overscroll — without the html/body dark bg, when the user over-scrolls past the top of the page on iOS, the cream peeks through. Fix 1 covers this too.
Code playbook: vault/Topics/web-patterns.md § Pattern 1 (Seamless dark header + hero). This is the deep version with all three fixes shown side-by-side.