1724907 - font-family: system-ui breaks font fallback mechanism

Status: VERIFIED FIXED

(Core :: Layout: Text and Fonts, defect)

Description

[Poren Chiang [:RSChiang]]

Attachment: Problem on Firefox 93.0a1 Nightly

Regressed by: 1226042

Keyword: Nightly-community

Description:

After the recent rollout of system-ui font family on Nightly, elements with either:

1. system-ui as their only font-family or
2. system-ui as their preferred font-family while lang attribute is present

would render non-Latin alphabets with the browser default font for that language, instead of the correct system font or the next font specified in CSS font-family fallback list.

The problem is illustrated in the attached screenshot. For the provided text sample, Firefox is expected to use either the coordinated .AppleSystemUIFont as in Safari, or .SF NS (the Latin system font), PingFang TC (CJK system font for zh-TW locale) and so on for their locale. Instead, Arial and Songti SC (the serif CJK font for zh-CN locale) is used for the non-Latin glyphs.

This behavior is not shown in the previous -apple-system implementation.

Comment 1

[Poren Chiang [:RSChiang]]

Attachment: cf. Firefox 90.0 Stable

Comment 2

[Poren Chiang [:RSChiang]]

Attachment: Safari 14.1.1 (expected behavior)

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Will look, thanks.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1724907 - Don't use system-ui as a fallback generic. r=jfkthame

As it's usually not very useful. I don't know how easily we can add a
reliable test for this, let me know if you come up with an idea to do
that.

Comment 5

[Poren Chiang [:RSChiang]]

Thanks for looking into this! As far as I know, Facebook has already made system-ui as their preferred font on web, and the problem will thus be pretty noticeable to ordinary users if it landed on stable.

Kudos for the quick patch ✨

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1724907 - Reftest. r=jfkthame

Confirming on try that it behaves as expected.

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9818a76ba62c
Don't use system-ui as a fallback generic. r=jfkthame

Comment 8

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/9818a76ba62c

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/766266465e59
Reftest. r=jfkthame

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/99e35344e152
Annotate reftest as failing on Android.

Comment 11

[Alexandru Michis [:malexandru]]

https://hg.mozilla.org/mozilla-central/rev/766266465e59
https://hg.mozilla.org/mozilla-central/rev/99e35344e152

Comment 12

[Emilio Cobos Álvarez (:emilio)]

Comment on attachment 9235573 [details]
Bug 1724907 - Don't use system-ui as a fallback generic. r=jfkthame

Beta/Release Uplift Approval Request

• User impact if declined: system-ui rendering when unsupported characters are used will use wrong fallback.
• Is this code covered by automated tests?: Yes
• Has the fix been verified in Nightly?: Yes
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: comment 0
• List of other uplifts needed: none
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Very simple patch to use same fallbacks as named families.
• String changes made/needed: none

Comment 14

[Ryan VanderMeulen [:RyanVM]]

Comment on attachment 9235573 [details]
Bug 1724907 - Don't use system-ui as a fallback generic. r=jfkthame

Approved for 92.0b4.

Comment 15

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-beta/rev/d74c26ca4cae
https://hg.mozilla.org/releases/mozilla-beta/rev/495f1e54ee7d

Comment 16

[Catalin Sasca, Desktop QA [:csasca]]

Reproduced the issue on Firefox 93.0a1 (2021-08-08) under macOS 11.5 by following the infos provided in the first comments.

The issue is fixed and the correct fonts are used on 93.0a1 (2021-08-16) and Firefox 92.0b4 on the same system.