Debugging Invisible Elements: transform-origin + scaleX(-1)

TL;DR Events firing correctly, element exists in the DOM, DevTools force-visible works — but nothing shows up on screen. Before diving into rendering pipelines and compositing layers, check your CSS transform geometry first. The element might just be somewhere you can't see. The Symptoms This combination is particularly deceptive because every standard check passes: Check Result Event firing ✅ Normal DOM presence ✅ Normal Element position ✅ Roughly correct DevTools force-visible ✅ Works Everything points toward a rendering or performance issue — compositing layers not being created, overflow: hidden clipping, opacity skipping paint. These are all real CSS mechanisms and they sound completely plausible. That's what makes it easy to spend a long time in the wrong direction. Sometimes the element is just sitting in a coordinate space you can't see. Two Common Culprits 1. Non-center transform-origin + negative scale scaleX(-1) isn't "mirror the image." It's "fold the entire coordinate spac