| Summary: | REGRESSION (iOS 15.7 - 17): Broken text rendering on gohosono.com | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | keit <k-toda> | ||||||||
| Component: | Text | Assignee: | Nobody <webkit-unassigned> | ||||||||
| Status: | RESOLVED MOVED | ||||||||||
| Severity: | Normal | CC: | bfulgham, karlcow, mmaxfield, simon.fraser, vitor.roriz, webkit-bug-importer, zalan | ||||||||
| Priority: | P2 | Keywords: | InRadar | ||||||||
| Version: | Safari 17 | ||||||||||
| Hardware: | Unspecified | ||||||||||
| OS: | iOS 17 | ||||||||||
| URL: | https://www.gohosono.com | ||||||||||
| Attachments: |
|
||||||||||
|
Description
keit
2023-11-06 03:53:16 PST
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! 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. 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. 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.
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.
It also reproduces on iPhone 15 Pro (real device) 17.2 (21C43) I can also reproduce on the latest non-released version of iOS. 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'. 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. 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. |