Bug 264249 – REGRESSION (iOS 15.7 - 17): Broken text rendering on gohosono.com

• Component: Text
• Status: RESOLVED MOVED

[keit]

As indicated on this page, https://discussionsjapan.apple.com/thread/255186520, certain fonts are not being rendered correctly.
As previously mentioned on the community page, the issue is resolved when I capture a screenshot and switch to a full page.

In my environment, the following fonts are not being rendered correctly: '游ゴシック', YuGothic, '游ゴシック体', 'ヒラギノ角ゴ Pro W3'.
However, the 'メイリオ' font is rendered without any issues.

This issue does not occur on macOS or on previous versions of iOS.(The version I checked was 15.7.)

[Radar WebKit Bug Importer]

<rdar://problem/117997568>

[Vitor Roriz]

Hi, thank you for filling this bug.
I've tried it on iOS 17.3 and couldn't reproduce, or at least I couldn't see anything out of ordinary. I've based myself on the images attached in the link you have posted before.

Could you, please, provide details on what is broken exactly and how you have tested it? Thank you!

[keit]

Hi, I apologize for the ambiguity in the initial report.
The CSS definition for the originally reported site had been changed. However, by enabling the '-webkit-font-smoothing: none;' definition, I was able to reproduce the issue on iOS 17.2.1.

[Karl Dubost]

Created attachment 469204 [details]
iPhone 13 Pro with iOS 17.2.1 (21C66)

Toda-さん,
ありがとうございます

So far I could not reproduce on iPhone 16.0 (Simulator)
and could not reproduce on iPhone 17.4 (Simulator)

with or without -webkit-font-smoothing: none;

The current page at http://www.gohosono.com/ has 


body {
    min-width: 900px;
    font-size: 15px;
    font-family: 'ヒラギノ角ゴ Pro W3', 'メイリオ', sans-serif;
    /* font-family: 'Noto Serif JP', 'Yu Gothic', '游ゴシック', YuGothic, '游ゴシック体', 'ヒラギノ角ゴ Pro W3', 'メイリオ', sans-serif; */
    color: #222;
    line-height: 1.6;
    /* -webkit-font-smoothing: none; */
}

I also played with the combination of font-family to try to reproduce the issue.

Let's try on a real device.
Ah yes activating `-webkit-font-smoothing: none;` creates the issue.
Let's upload a screenshot.

The screenshot is on iPhone 13 Pro with iOS 17.2.1 (21C66).

I will  try to simplify even a bit more.

[Karl Dubost]

Created attachment 469205 [details]
web-inspector

A screenshot of the web inspector on the iPhone where I can reproduce. 

body {
    font-family: 'ヒラギノ角ゴ Pro W3', 'メイリオ', sans-serif;
    -webkit-font-smoothing: none;
}

Let's see if I can reproduce in a minimal test case.

[Karl Dubost]

Created attachment 469206 [details]
minimal test case

Steps to reproduce:
1. open the minimal test case on iPhone with Safari 17.2.1

Result:
the characters are mangled.

[Karl Dubost]

It also reproduces on iPhone 15 Pro (real device) 17.2 (21C43)

[Karl Dubost]

I can also reproduce on the latest non-released version of iOS.

[Vitor Roriz]

From my tests, the problem is with 'ヒラギノ角ゴ Pro W3' (Hiragino Kaku Gothic Pro). This font combined with '-webkit-font-smoothing: none' is producing garbage for various characters, like '3'.

[Alexey Proskuryakov]

Thank you for the report! This was determined to be an issue in a system framework other than WebKit. Apple will track the issue internally.

[Karl Dubost]

It has been fixed internally, and it will be available in a future release. 



But as a note -webkit-font-smoothing
https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth
is a non standard feature, which should probably not be used.
The browsers are probably stuck with it for compatibility purpose too. 



Also for this particular issue
`-webkit-text-smoothing: antialiased` was probably the intended effect.