--USER-fontSize not working on Safari iOS

[fondoger]

• Chrome Desktop ✅ (font scale normally)
• Safari Desktop ✅ (font scale normally)
• Safari iOS ❌ （font not scalling)

Somehow the zoom style is not inherited from :root to body.

[JayPanoz]

Created a pen so that we have an interactive demo for this issue to check and edit.

Dimensions scale but font-size doesn’t.

What’s worrying is that -webkit-text-size-adjust, that some have used in the past to implement the font-size user setting specifically for iOS, seems to be impacted as well. I guess I’ll have to take a look at webkit’s source code to see if there’s something different with iframe (codepen is using iframes for the result) before throwing anything and everything at the wall to see what sticks.

[JayPanoz]

Looks like a desktop-class intervention where Safari iPadOS counter-balances zoom and text-size-adjust, as explained here.

While switching to the “mobile version” (Request Mobile Website) of Codepen on an iPad, the pen works as expected. And both zoom and text-size-adjust are taken into account. It may also explain why this issue is pretty new to me while having tested the new implementation a couple of months ago. 😟

If someone could take a look at the pen on iPhone to confirm it works as expected, that would pretty much confirm this is what’s happening here.

[JayPanoz]

If someone could take a look at the pen on iPhone to confirm it works as expected, that would pretty much confirm this is what’s happening here.

So yeah, I can confirm it works as expected on iPhone so it’s highly likely this is a desktop-class intervention on iPadOS.

[JayPanoz]

Can confirm adding:

:root {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

Seems to be disabling the intervention on iPadOS but I’ll have to check whether there are side effects before committing.