An Icon Off-Center: Debugging Across Pixel Densities
When an icon appears misaligned inside a button — dropped lower than it should be — the instinct is to inspect the component mark-up and CSS. But the real culprit was nowhere in the code, at least not in the places a developer would typically look first.
The issue was reported with a screenshot showing the icon sitting low inside the button. Yet, opening the same component in the same environment—macOS, Firefox, identical versions—showed no problem at all. Team members on the same setup confirmed: no visual defect.
The discrepancy only appeared on a colleague's low-resolution external monitor, as opposed to the high-density "retina" display on a MacBook Pro. The key to reproduction was artificial: on macOS, it's possible to open the application's “Get Info” window and force the app to run in low-resolution mode. With Firefox configured that way, the bug became visible immediately.
The root cause appears to be pixel rounding that occurs at non-native resolutions, and it seems unique to Firefox's rendering. A reduced test case isolates the issue to the button's display property.
The fix involved a swap in display type: from inline-block buttons to inline-flex. Flexbox's alignment capabilities handle centering far more robustly across display resolutions, making it the more fitting choice for buttons.
