I spent the last few weeks building a Chrome extension that puts a design frame on top of a running web page so you can see where the implementation drifted. The idea is old — designers have been dropping semi-transparent mockups over their builds since Photoshop — but doing it inside a browser extension turned out to have a few traps that cost me real time.
None of these are exotic. All four are the kind of thing that looks correct, runs without an error, and produces a subtly wrong result you only notice when you measure something.
An overlay pinned to the viewport is the wrong overlay
The obvious way to draw an overlay is position: fixed. It sits where you put it, it doesn't move, done.
It's wrong the moment the user scrolls.
