The Bug That Only Existed in Production

The site uses frosted glass in a few places. On my machine they were frosted. In production they were flat grey rectangles, in every browser I could reach, and had been for a while.

The cause was a vendor prefix. I had written the prefixed property after the unprefixed one — the order everyone learns — and the build’s new minifier, seeing the same property twice, kept the last one and threw away the first. The prefixed line survived. The one that actually does anything in a current browser did not. A line I added to improve compatibility was the line that broke it.

What made this take longer than it should have is that nothing was wrong in the source, and nothing was wrong in development. The only place the bug existed was in the compressed output. I chased the wrong layer for a while, on the reasonable-sounding theory that a visual bug in a visual effect is a visual bug.

The fix was to delete every hand-written prefix and let the build add what it needs. The part I actually changed my habits over is the check: the test now opens the shipped file in a real browser and reads the computed value off the element. Not "is the property in the CSS" — grep would have passed all along — but "does this element, in this browser, actually have the effect". Everything I had been trusting was a proxy for that question, and every proxy said yes.