guardian / guardian/dotcom-rendering
Incorrect font sizing on fronts when user set large default font size
- Dominant language
- TypeScript
- Stars
- 274
- Forks
- 34
- Avg merge
- 2d 22h
- Merged PRs (30d)
- 121
Description
When on a mobile device using Chrome and the user has the font size set to large in their accessibility settings, then some of the kickers do not increase relatively in size with the rest of the content. In the screenshot below, this includes the "live" kickers and the inline kickers
On the surface this looks like a `px` instead of `rem` issue, but all font sizes look to be either inherited from a parent or defined in `rem`. This is only a problem on a mobile device, so you will not be able to reproduce by adjusting the viewport on your laptop. It also looks to only be an issue on Chrome - I tested both Safari and Firefox on mobile devices and both worked fine.
I have not found a solution to remedy this without causing design changes. For the inline kickers, changing the display from `inline-block` to `inline` does fixes the problem, but this causes the height of the kicker to change, which is not intended.
| | Mobile device, Chrome, font-size 2x | laptop, Chrome, font-size very large |
| - | - | - |
| | ![chrome] | ![other] |
[chrome]: https://github.com/user-attachments/assets/5c2bd6a1-d454-4c8b-b38f-29381d298fc2
[other]: https://github.com/user-attachments/assets/6d00c5c4-1f57-48d9-af1d-c46b10ad4799
Browsers affected:
- Chrome, Edge
Devices affected:
- Android, (unable to test on iOS Chrome)
Contributor guide
Assessment
This issue has not been assessed yet.