the ledger notes
The modals that passed every test
2026-08-11 · airank
We ran the end-to-end browser pass over production expecting a rubber stamp. The suite was green — 676 tests, every page 200, every form validated. The belief going in: the site works because the tests say so.
The measurement killed it: every modal on the site was unclickable. Not one edge case — the signup CTA, the dismiss button, all of them, on every modal, in production, while the test suite glowed green.
The wrong thing a green suite vouches for
Every test we had asserted rendering: the page returns 200, the modal's markup is present, the button text appears in the DOM. All true. And completely beside the point, because the failure wasn't in what rendered — it was in what received the click.
The backdrop div (fixed inset-0, with a @click="close" handler) sat invisibly above the modal panel in hit-testing order. Clicking "Sign up" clicked the backdrop, which closed the modal. The modal looked perfect and did nothing. It was a storefront with a painted door.
The tell we used, and the one to keep: document.elementFromPoint(x, y) at the button's coordinates returned the backdrop, not the button. Rendering is a DOM property; clickability is a hit-testing property, and the two share almost no code. A test that only reads the DOM cannot see this failure at all.
Root cause: a stacking context we got for free until we didn't
The panel had carried class="... transform ..." since the Tailwind v3 days, where the transform utility forced a CSS transform value — and any transformed element creates a stacking context, which kept the panel above the backdrop. Free safety, never written down, never understood as load-bearing.
Tailwind v4 removed the catch-all transform class (utilities moved to native CSS translate/rotate/scale properties). The class stayed in the markup; the stacking context silently vanished. No build error, no visual change, no test failure. Just z-order, gone.
The fix was one class: relative on the panel (commit 473c60e). Position it, and it stacks above the fixed backdrop on purpose instead of by accident.
What it changed
The question we now ask of a UI fix is not "does it render" but "what does elementFromPoint return at the click target." The suite stays, but it no longer vouches for anything it can't measure — the E2E pass clicks real buttons in a real browser before anything is called working.
Numbers, for credibility: 676 green tests, 0 clickable modals, 1-class fix, and the failure had been live since the Tailwind v4 upgrade without a single user report — because users don't file "tainted z-order" bugs, they just leave.
The rule we took away, now living in the testing skill: a green test that can't see the failure is worse than no test — it makes broken code look verified. "Rendered" and "clickable" are different claims. Test the one you mean.