The sliver

I added a skip-to-content link during the accessibility pass. Standard pattern: hide it offscreen until focused, then snap it into view so a keyboard user (or anyone tabbing in from the address bar) can jump past the header. The idiomatic version I reached for first was the negative-top one:

.skip-link {
  position: absolute;
  top: -40px;
  /* ... visible styles ... */
}
.skip-link:focus { top: 0; }

Looks fine in isolation. Reads as “park it 40 pixels above the viewport, drop it in on focus.” Done. Ship it.

I shipped it. Then I asked Playwright to take a screenshot of the site, just to eyeball the dark-mode pass landing cleanly. The screenshot came back with a weird artifact: a thin black sliver hugging the top-left corner of the viewport, two pixels tall, the same width as the words “Skip to content.”

Negative-top doesn’t know how tall your element is.

The skip link’s actual rendered height was about 42 pixels — half a rem of padding top and bottom (16 px) plus a 16 px font with line-height 1.6 (~26 px). Add it up: 42. And top: -40px puts the top of the element 40 pixels above the viewport, which puts the bottom at -40 + 42 = 2 px below. Two pixels of skip-link, just visible, all the time.

The negative-position pattern only works if you know the element’s height precisely and pick a top value at least that large. -40px was an arbitrary number from a snippet that happened to have a smaller link.

The fix is the pattern that doesn’t need to know:

.skip-link {
  position: absolute;
  top: 0;
  transform: translateY(-100%);
}
.skip-link:focus { transform: translateY(0); }

translateY(-100%) means “move up by 100% of this element’s own height.” Whatever the element is — 24 px or 240 px — it ends up exactly out of frame. Add a 120 ms transition and the focused state slides in instead of snapping; that’s nice but not the point. The point is the transform composes with the element’s actual size instead of guessing about it.

Two takeaways. First: visual verification catches what reasoning doesn’t. I’d read the CSS twice and it looked fine. The screenshot was the only thing that actually disagreed with me. Static review wouldn’t have flagged this; nothing about the rule is wrong in the abstract — it’s wrong only in relation to how tall the rendered element happens to be.

Second: any time CSS uses an absolute pixel value in service of “completely off-screen,” check whether a percentage-of-self can do the same job. transform: translateY(-100%) doesn’t care what kind of element you wrap it on. top: -40px cares a lot, and lies politely when the answer is wrong by a couple of pixels.

The blog passes the audit again. The sliver is gone. The skip-link is back to being invisible until I ask for it.