HD Button vertical alignment on Windows Firefox

[origami-z]

Package name(s)

Core (@salt-ds/core)

Package version(s)

1.8.1

Description

Text is not aligned to the center vertically in HD Button

Steps to reproduce

Windows Firefox 102.11.0esr (32-bit), load https://storybook.saltdesignsystem.com/?path=/docs/documentation-core-button--page

Expected behavior

Text is aligned in center

Operating system

• macOS
• Windows
• Linux
• iOS
• Android

Browser

• Chrome
• Safari
• Firefox
• Edge

Are you a JPMorgan Chase & Co. employee?

• I am an employee of JPMorgan Chase & Co.

[james-nash]

Bug ranking score: 51 (using rubric v3)

Priority: high

========== BEGIN BUG RUBRIC SCORE DATA ===========
eyJ2YWx1ZXMiOnsiYWZmZWN0ZWRQZW9wbGVPcHRpb25zIjoyNS
wiYWZmZWN0ZWRDb21wb25lbnRzT3B0aW9ucyI6NywiZnJlcXVl
bmN5T3B0aW9ucyI6MTksImltcGFjdE9wdGlvbnMiOjEsImFmZm
VjdGVkRHNPcHRpb25zIjoxNywidXJnZW5jeU9wdGlvbnMiOjQ5
LCJ4RmFjdG9yT3B0aW9ucyI6MzB9LCJydWJyaWNWZXJzaW9uIj
ozfQ==
=========== END BUG RUBRIC SCORE DATA ============

[james-nash]

Added community label as this has been raised on behalf of Markets team.

[joshwooding]

I'm not sure this is a bug that we can fix.

The component itself isn't built incorrectly, this is caused by a quirk with our design choices:

• HD base size is 20px
• HD line-height is 14px
• HD font-size is 11px.

No prizes for spotting the odd one out :P Because of the odd and even numbers the font is forced to be off by 1px in a direction on low res screens or where subpixel rendering is disabled.

I'm not sure if there's a way we can force it to work but the same issue is present in UITK

[bhoppers2008]

@joshwooding @origami-z presumably this is going to be the same problem across the board? Dropdown, Input, List item, Banner... i.e., any component with an even height using HD/Action or Body type font styles?

[joshwooding]

@joshwooding @origami-z presumably this is going to be the same problem across the board? Dropdown, Input, List item, Banner... i.e., any component with an even height using HD/Action or Body type font styles?

Yeah, the problem will show up in multiple places

[bhoppers2008]

Do we have rough numbers for # low res monitor users/ # people affected? We could consider a 1px increase in font size at HD but that'll 'break' the system and would be good to know how critical this is before making permanent changes.

[origami-z]

I'd guess 99% users are not using Retina display. This appears to be a problem specifically on Windows Firefox. Using Firefox on Mac on the same monitor doesn't have the problem. It could also be a Firefox version problem? I don't have way to validate yet.

[bhoppers2008]

So how do we proceed with this? Is it possible for us to understand the impact? Do we assume it's going to be a wide reaching issue that needs a resolution? Is there definitely no technical fix?

[origami-z]

Looks like real browser differences... https://stackoverflow.com/a/5883303

I think this matters the most on standalone text in an element (e.g. button)..?

[joshwooding]

There is still an underlying issue, but I can't reproduce this in v115.9esr so its impact is probably low now.