USWDS - Range slider: webkit thumb sits 1px low after track border increased to 2px #6813

Summary

The webkit-specific margin-top offset on ::-webkit-slider-thumb was not updated when the track border was widened from 1px to 2px in #6659 (726e7750a). The thumb now sits 1px below the track centreline in every Chromium and Safari browser at every viewport and container width.

Root cause

::-webkit-slider-runnable-track uses content-box sizing — it does not inherit box-sizing from its originating element and has no box-sizing declaration of its own. This means the track's rendered height is:

rendered height = height property + border-top + border-bottom

Webkit positions ::-webkit-slider-thumb relative to the track centreline. The margin-top correction in _usa-range.scss was hand-tuned to the 18px track (-3px). With a 20px track the centreline is 1px lower, so -3px is 1px short.

Affected browsers

Chromium (Chrome, Edge) and Safari — any browser using the -webkit-slider-* pseudo-elements. Firefox uses ::-moz-range-thumb and is unaffected.

Affected viewports / containers

All — the track height is fixed (height: units(2)), not responsive, so the 1px drift is identical across every viewport width and container width.

Fix

packages/usa-range/src/styles/_usa-range.scss — the ::-webkit-slider-thumb block:

- margin-top: px-to-rem(-3px); // magic number
+ // Webkit positions ::-webkit-slider-thumb relative to the track centerline
+ // using content-box geometry. The track renders at:
+ //   height (units(2) = 16px) + border-top + border-bottom = 20px total
+ // because ::-webkit-slider-runnable-track does not inherit box-sizing and
+ // defaults to content-box. Without correction the thumb sits 1px low.
+ // Formula: -(border-width) = -(2px) = -2px half-correction per side, rounded
+ // to the nearest rem. Update this value whenever the track border-width changes.
+ // Current track border: units(2px) — see range-track mixin above.
+ margin-top: px-to-rem(-4px);

Introduced in

Commit 726e7750a ("USWDS - Range slider: Improve contrast and focus outline"), part of the v3.14.0 development cycle. The margin-top magic number predates that commit and was calibrated to the 1px border; it was not updated when the border was widened.