Bug 220140 – iOS 14.3 Safari on iPhone has an incorrect font size with vertical-rl

• Component: Layout and Rendering
• Status: NEW

[Meng-Yuan Huang]

Created attachment 416746 [details]
Different Font Sizes with vertical-rl

Please open this link on iPhone (maybe 8 Plus) iOS 14.3 Safari:
https://mrmyhuang.github.io/catalog/juan/T0235/1
It displays some texts with CSS "writing-mode: vertical-rl."

You will see the texts are rendered with 32px (correct font size) or 41px (incorrect).
The attached screenshot shows the correct font size in the green rectangle and the incorrect font size in the red rectangle.
However, iPad 7 iOS 14.3 Safari has no such problem! Try to open the link!

Please fix this bug on iPhone. Thanks.

[Meng-Yuan Huang]

If anyone needs the sources of the web app for debugging, please follow these steps:
1. Run the bash script:
git clone [e-mail]:MrMYHuang/cbetar2.git
cd cbetar2
npm i -D
npm run start

2. Open the link:
http://localhost:3000/catalog/juan/T0235/1

[Alexey Proskuryakov]

I can reproduce this behavior with iPhone 12 Pro, one line has different font size than others.

How did you determine that this is a bug in WebKit, not just how this web app behaves? Did this work differently in earlier iOS versions?

This web app is complex enough for analysis to be difficult. Can you make a reduced test case?

[Meng-Yuan Huang]

(In reply to Alexey Proskuryakov from comment #2)
> I can reproduce this behavior with iPhone 12 Pro, one line has different
> font size than others.
> 
> How did you determine that this is a bug in WebKit, not just how this web
> app behaves? Did this work differently in earlier iOS versions?

Thank you. Because iOS 14.3 Safari on iPad renders the webpage with a consistent font size (32px) as specified in CSS. I can reproduce the same problem with iOS 13.1 Safari on iPhone 7 simulator.

> 
> This web app is complex enough for analysis to be difficult. Can you make a
> reduced test case?

It's a bit difficult but I will try to do it as possible...

[Radar WebKit Bug Importer]

<rdar://problem/72690351>

[Simon Fraser (smfr)]

Does '-webkit-text-size-adjust: none' fix it?

[Meng-Yuan Huang]

(In reply to Simon Fraser (smfr) from comment #5)
> Does '-webkit-text-size-adjust: none' fix it?

Thank you. It works!