Bug 293617 – CSS Zoom interacts oddly with explicit font-size and font-variant on iPad

• Component: Text
• Status: NEW

[Jay Panoz]

Created attachment 475385 [details]
Here you can see a reproduction of the issue through BrowserStack testing on iPadOS18

This is far from new but with zoom on iPadOS now being part of “baseline 2024” on MDN. 

From the Stack Overflow topic on this issue, it looks like iPadOS, when requesting the desktop website, applies some kind of intervention you can disable via -webkit-text-size-adjust (that is behaving differently between iOS and MacOS). Fine, I guess at least there is a way to disable it if needed so no worries.

However, I went down a rabbit hole because this was far less trivial than the original explanation on Stack Overflow made it appear, as I discovered that font-styling like “font-weight: bold”, “font-variant: small-caps” or “font-style: italic” were not handled properly, unless setting “-webkit-text-zoom” on these elements. 

I created a codepen to demonstrate the issue more easily: https://codepen.io/JayPanoz/pen/qEEWEQm

Links: 

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/zoom) I hoped it would perhaps be reviewed/revised/discussed

Stack Overflow explanation: https://stackoverflow.com/questions/59000766/css-zoom-does-not-work-ipad-os-v13-latest-safari/64998974#64998974

I am aware of these related issues: 

- https://bugs.webkit.org/show_bug.cgi?id=272339
- https://bugs.webkit.org/show_bug.cgi?id=240947

[Simon Fraser (smfr)]

I agree there's some very surprising behavior here.

[Radar WebKit Bug Importer]

<rdar://problem/152173269>