Spinners sized with `em` can visibly wobble while rotating in WebKit-based browsers. The issue appears to come from subpixel rendering: the rotation remains stable when the computed width and height resolve to even pixel values, but `1em` often produces an odd or fractional result depending on font settings and accessibility overrides.
Common compositing tricks such as `will-change: transform`, `translateZ(0)`, and `backface-visibility: hidden` do not solve it because the problem is not layer compositing. A better approach is to keep the spinner responsive to the surrounding font size while snapping its dimensions to the nearest 2-pixel increment:
```css
.spinner {
width: round(1em, 2px);
height: round(1em, 2px);
}
```
This preserves the relationship with the text size while avoiding unstable fractional dimensions. How reliable is this approach across browser versions and user-configured font sizes?
4 Answers
A fixed-size rotating element with a scaled wrapper is another reasonable option when compatibility is more important than keeping the spinner’s own dimensions in `em`. It avoids relying on font metrics, though the `round()` approach is cleaner when supported.
This is a great practical use for `round()`. Many common font sizes happen to resolve to even pixel values, so the issue can go unnoticed, but unusual scaling or accessibility settings can expose it. Snapping the result to a 2-pixel increment makes the spinner more robust.
`round()` works nicely here, but browser support matters. The version that rounds a length using a unit such as `2px` is newer than many CSS references suggest, so older browsers may ignore it. A fallback could use fixed pixel dimensions, or a fixed-size spinner inside a wrapper that is scaled separately.
The important part is that users may have larger default or minimum font sizes enabled, or an extension may override the page sizing. A solution that still follows the user’s preferred scale while producing stable pixel dimensions is much better than assuming a particular font metric.
That fallback makes sense for older engines. The rounded dimensions also appear to remain stable with a large minimum font size, and newer desktop versions no longer seem to need the workaround, while the mobile version still benefits from it.