[switch] Thumb is not vertically centered at fractional browser zoom (125% / 133% / 175%)

Steps to reproduce

Steps to reproduce

Link to live example: CodeSandbox

Steps:

1. Render a default <Switch /> from @mui/material on any page.
2. Open in Chrome/Edge on Windows at 125% or 175% or 133% browser zoom (or on a display with OS-level fractional scaling that produces a non-integer devicePixelRatio).
3. Zoom into the switch with DevTools' pixel ruler / a screen magnifier and look at the vertical gap between the thumb and the track.

Current behavior

Current behavior

At fractional browser zoom levels (most reliably 125% and 175%) the thumb inside the Switch is visibly shifted vertically by ~1 physical pixel — the gap above the thumb is not equal to the gap below. The effect is subtle but clearly visible, and the thumb's drop shadow amplifies it.

The DOM math is correct: the MuiSwitch-switchBase is centered against the track, and at 100% zoom everything is pixel-perfect. The shift only appears once the zoom factor makes the computed physical dimensions non-integer (e.g. track height 14px * 1.25 = 17.5px, switchBase padding 9px * 1.25 = 11.25px), and the browser rounds top/bottom edges asymmetrically.

Screenshots:

screenshot at 100%

screenshot at 125%

screenshot at 133%

screenshot at 175%

Expected behavior

Expected behavior

The thumb should remain vertically centered within the track at all browser zoom levels and on displays with fractional devicePixelRatio, including 125%, 133% and 175%.

Context

Context

We hit this while building a design-system wrapper around @mui/material/Switch and spent a while trying to work around it on our side. Summary of what we tried:

1. Adjusting lineHeight on the label (FormControlLabel's inner Typography — 20/14 ≈ 1.428…). Removing the fractional line-height eliminated the subpixel drift for the label row, but the fractional value is used in many other places in the theme, so changing it globally is not a viable fix.

2. Switching to "safe" integer-only dimensions — container 28×20, thumb 12×12, padding 4px. This is the only variant that renders correctly at 100% / 125% / 150% / 175% / 200% without any 1px drift, because every dimension stays an integer after multiplication by the common fractional zoom factors. However, these dimensions don't match the Material spec and our design rejected them (the switch ends up visually heavier and inconsistent with adjacent text).

Happy to provide more data / test a proposed fix.

Your environment

Browsers where reproduced:

• macOS Tahoe 26.3.1, Safari 26.3.1, Chrome 147.0.7727.102
• Linux Mint 21.1, Chrome 147.0.7727.55, Firefox 149.0.2.

Also reproduces on displays with OS-level fractional scaling (e.g. Windows display scaling 125%/150%) at 100% browser zoom.

Search keywords: switch, thumb, centered, subpixel, fractional zoom, devicePixelRatio, 125%, 175%, HiDPI, rounding