rotate(90deg) zeroes both scale terms: the visibility check that flagged three legible headings

On 2026-08-06 my own visibility check failed PartsProof's front page: three headings, it reported, were painting nothing. I was looking straight at them while it said so, on screen, legible, every pixel where it had always been, and what that false finding was going to cost was the check itself, because there was no edit to the page that would have satisfied it.

Those three headings are the labels on the horizontal accordion, and they carry the three facts the section exists to deliver: the date the EU Cyber Resilience Act's reporting duties start, that already-shipped products are covered, and the size of the fine. They read "Sept 11, 2026", "Already shipped" and "€15M / 2.5%".

What the check was actually asking

The check opens the finished page in a real browser and, for every run of text a reader can see, walks up the ancestor chain multiplying opacity, watching for visibility: hidden, and looking for a transform that has squashed the box flat. A heading that paints nothing is a fail, because a heading is never decoration.

A CSS transform arrives from getComputedStyle as six numbers. The first four, conventionally a, b, c, d, are the linear part: they say how the box gets stretched, turned and sheared. The last two are the offset.

The original test, written on 2026-08-05, read the first and fourth:

if (Math.abs(m.a) < 0.01 || Math.abs(m.d) < 0.01) clipped = true;

That is a fair description of scaleX(0). Set horizontal scale to zero and a is zero and the element has no width left to paint into.

A quarter turn puts a zero in the same slots

rotate(90deg) has the matrix (0, 1, -1, 0). Turning something ninety degrees means the horizontal axis is now doing the vertical work, so the terms on the diagonal go to zero and the terms off it carry the whole transform. The check never read those. It saw a at zero, called the box collapsed, and filed three findings against text that was painting every pixel it always had.

The labels are vertical on purpose. The exact value on them is translate(-50%, -50%) rotate(90deg), and the translate does not touch the four numbers at all.

The question is whether any area survived

What actually stops paint is a linear part with no area left in it. Multiply the diagonal, subtract the off-diagonal, and if the answer is zero the box has been flattened onto a line:

const m = new DOMMatrixReadOnly(s.transform === "none" ? "" : s.transform);
if (Math.abs(m.a * m.d - m.b * m.c) < 1e-4) clipped = true;

Same line count, one comparison instead of two. It is exactly scaleX(0), scaleY(0), scale(0) and any other degenerate matrix, and it is exactly not a rotation, a skew, a flip or a translation, all of which move a box around while leaving it with area.

Why the wrong answer here was worse than a wrong answer

A check that reports a real defect costs you a fix. A check that reports a defect nobody can create costs you the check.

There was no edit to PartsProof that satisfied the old test. The only compliant page was one with those labels unrotated, which means giving up a deliberate piece of design to please a bad predicate. The other exit is an exception list, and an exception list is a supported way to write down a failure and ship past it. Both roads end with the check being something you route around.

So the fix went into the shared checker rather than into the product, and every site the checker runs against inherited it the same day. Rotated labels, mirrored icons and sheared decorative panels stop producing findings. scaleX(0), which is how half the estate's accordions keep a closed panel out of the paint, still produces one.

How we built this: PartsProof

---

One shipped product, taken apart, once a month. What it does, what it cost to build, what the pipeline behind it looks like, and what the numbers did, read off the repository and the live site, not written from memory. Join the list.