Text in various components slightly shifted in iOS Safari

[dcastil]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you're having.

The text of a few components is slightly off in iOS Safari. The shift in positioning is around 1-2px which doesn't prevent the components from working but they make the overall design look less robust as it is definitely noticeable.

Is this issue related to a specific component?

Following components are affected:

• Button
• Checkbox
• Radio button
• Select
• Text input

What did you expect to happen? What happened instead? What would you like to
see changed?

Here is a brief showcase of the problem. In all three examples the text is positioned too high. It should be aligned with its input element or the surrounding box.

What browser are you working in?

Desktop in background: Safari 12.1.2 on Mac OS Mojave 10.14.6
Smartphone in foreground: Safari on iPhone 8 running iOS 12.4

What version of the Carbon Design System are you using?

All screenshots were taken from the component pages on the Carbon Design website.

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?

I'm not using Carbon at the moment but I'm considering using it for a new project. Many users will be on mobile Safari, so it's important that the UI looks good there.

Steps to reproduce the issue

1. Grab an iPhone or iPad
2. Go to https://www.carbondesignsystem.com/components/checkbox/code/
3. Check out the text positioning
4. Go to the pages of the components mentioned above and check out these as well.

[joshblack]

cc @vpicone have you all run into anything like this on the Plex side?

[tw15egan]

Still an issue when viewing on iPhone XS Max

[tay1orjones]

After some lengthy debugging I think I've finally pinned down the cause of this. These alignment issues are not present in the storybook, they're only present on the component demos within the carbondesignsystem.com website. The website uses the IBM Plex Variable Font (VF), whereas the storybook (and the overall default font family in the root styles) use the non-variable IBM Plex family.

If I override the font family on the website you can see the vertical alignment movement:

variable.font.alignment.mov

I've been unable to pin down if this is a browser issue, a problem with the variable font, or a problem with our usage of the variable font. It's worth noting that we don't see these alignment problems on the website in Chrome, which leads me to suspect it's an iOS webkit/safari bug.

[tay1orjones]

I do see a small shift in chrome as well actually

small.shift.in.chrome.mov

[tay1orjones]

Opened an issue on the plex repo for this, IBM/plex#377

[tay1orjones]

With Plex v6.3.0 now out, this issue should be fixed in the variable font. We need to update

• gatsby-theme-carbon
• carbon-website

[emyarod]

this issue appears to be resolved