Skip to content

[@mantine/core] RollingNumber: Fix sub-pixel digit misalignment at fractional zoom levels - #9251

Merged
rtivital merged 4 commits into
mantinedev:masterfrom
rajat12826:fix-rolling-number-alignment-v2
Oct 6, 2026
Merged

rtivital merged 4 commits into
mantinedev:masterfrom
rajat12826:fix-rolling-number-alignment-v2

Conversation

@rajat12826

Copy link
Copy Markdown
Contributor

Fixes #9239
Followup to #9241 (closed) – implements the approach suggested by @rtivital.

Problem

DigitColumn positions each digit by shifting a 0–9 strip with
transform: translateY(-{digit}em). When 1em is a fractional number of
device pixels (non-100% browser zoom, OS fractional scaling like Windows
125%/150%), each digit's shift has a different fractional part and is rounded
to device pixels differently. This causes some digits to sit ~1px above or
below the others.

Fix

Move the resting offset from transform into layout:

- transform: `translateY(${-digitIndex}em)`
+ position: 'relative'
+ top: `${-digitIndex}em`

@rtivital rtivital added the Verified Reviewed and verified PR label Oct 6, 2026
@rtivital

rtivital commented Oct 6, 2026

Copy link
Copy Markdown
Member

🤖 Beep boop, Claude (Fable 5.1) speaking! Here are changes I've made in this PR:

  • Moved position: relative from the inline style of each digit column to the .digitColumn rule in RollingNumber.module.css, so the inline style only carries top and the two roll variables.
  • Restored the original renders a 12-cell wraparound strip in each column test: the strip always has 12 cells, the extra rerender was not needed.
  • Replaced the removed transform test with positions digit columns with top offset instead of transform, which asserts the resting offset is on top and transform stays empty. This is the regression test for the fix.
  • Added the --rn-roll-from assertion to the "does not wrap when value direction is down" test.

Verified in the browser at 23.4px and 28.6px font sizes: digits 3/8 and 1/2/7 were 1 device pixel off on master, all digits are aligned with this PR. Roll animation, wraparound and copy behavior are unchanged.

@rtivital
rtivital merged commit 7dc25c4 into mantinedev:master Oct 6, 2026
1 check passed
@rtivital

rtivital commented Oct 6, 2026

Copy link
Copy Markdown
Member

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Verified Reviewed and verified PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

RollingNumber: digits are vertically misaligned by ~1px at non-100% zoom / fractional display scaling

2 participants