Bug 220140

Summary:

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

Product:

WebKit

Reporter:

Meng-Yuan Huang <myh>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

ap, bfulgham, mmaxfield, myh, simon.fraser, webkit-bug-importer, wenson_hsieh, zalan

Priority:

Keywords:

InRadar

Version:

Safari 14

Hardware:

iPhone / iPad

OS:

iOS 14

Attachments:

Description	Flags
Different Font Sizes with vertical-rl	none

Description Meng-Yuan Huang 2020-12-24 04:29:15 PST

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.

Comment 1 Meng-Yuan Huang 2020-12-24 04:31:19 PST

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

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

Comment 2 Alexey Proskuryakov 2020-12-26 13:25:40 PST

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?

Comment 3 Meng-Yuan Huang 2020-12-26 15:53:08 PST

(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...

Comment 4 Radar WebKit Bug Importer 2020-12-27 09:42:48 PST

<rdar://problem/72690351>

Comment 5 Simon Fraser (smfr) 2020-12-27 09:43:27 PST

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

Comment 6 Meng-Yuan Huang 2020-12-27 17:18:13 PST

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

Thank you. It works!