NumberFlow doesn't display properly on smaller text sizes on Safari

[sunwrobert]

NumberFlow version

0.4.2

Framework version

react@18.3.1

Describe the bug and the steps to reproduce it

I'm on Safari 17.5. If you make the font-size 14px or below the formatting gets distorted. Some numbers are higher than others, dollar sign doesnt align, etc.)

To repro you can just go on the demo site and change the font size to 14px. https://number-flow.barvian.me/

Minimal reproduction (greatly appreciated)

https://number-flow.barvian.me/

[barvian]

Hi @sunwrobert, thanks for filing 👋. This looks like a Safari bug but I just pushed a tiny update to make a workaround easier. You should be able to add these styles to your page if you're using NumberFlow with a < 16px font size and formatting that includes symbols on the sides of the number:

/* Replace -react with -vue or -svelte depending on your package: */
number-flow-react::part(left),
number-flow-react::part(right),
number-flow-react::part(left)::after,
number-flow-react::part(right)::after,
number-flow-react::part(symbol) {
	padding: calc(var(--number-flow-mask-height, 0.25em) / 2) 0;
}

I'm not sure I want to add these by default right now because they could affect custom styles and they're kinda worse in general. I'll leave this issue open for visibility though! Let me know if you're still experiencing issues.

[sunwrobert]

That fixed it, thanks!