search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.86k stars 1.82k forks source link

Text in various components slightly shifted in iOS Safari #3922

Closed dcastil closed 1 month ago

dcastil commented 5 years ago

What package(s) are you using?

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:

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.

Carbon form field displacement 001 Carbon form field displacement 002 Carbon form field displacement 003

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 commented 4 years ago

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

tw15egan commented 4 years ago

Still an issue when viewing on iPhone XS Max

tay1orjones commented 3 years ago

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:

https://user-images.githubusercontent.com/3360588/122299677-eb815b80-cec3-11eb-8610-d585448b3e14.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 commented 3 years ago

I do see a small shift in chrome as well actually

https://user-images.githubusercontent.com/3360588/122437677-8bd88e00-cf5f-11eb-8216-29084fbe44c2.mov

tay1orjones commented 3 years ago

Opened an issue on the plex repo for this, https://github.com/IBM/plex/issues/377

tay1orjones commented 1 year ago

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

emyarod commented 1 month ago

this issue appears to be resolved