New issue
Advanced search Search tips

Issue 733219 link

Starred by 2 users

Issue metadata

Status: Verified
Owner:
Closed: Sep 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Bug



Sign in to add a comment

system-ui font family is invisible

Reported by jha...@gmail.com, Jun 14 2017

Issue description

UserAgent: Mozilla/5.0 (X11; Fedora; Linux x86_64; rv:53.0) Gecko/20100101 Firefox/53.0

Example URL:
https://jsfiddle.net/9yeoLewo/

Steps to reproduce the problem:
1. Open any website with font-family:system-ui
2. The font is invisible

What is the expected behavior?

What went wrong?
The font is invisible.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 58  Channel: n/a
OS Version: 10.0.14393
Flash Version: Shockwave Flash 25.0 r0

A user noticied this after VS Code switched to using system-ui: https://github.com/Microsoft/vscode/issues/28619
 
Components: -Blink Blink>Fonts

Comment 2 by e...@chromium.org, Jun 16 2017

Owner: kojii@chromium.org
Status: Assigned (was: Unconfirmed)
The same for me, 
But also for example Opera use chromium too and I have this problem on "settings" for example there

Windows 10
Chrome: Version 60.0.3112.113 (Official Build) (64-bit)

Comment 4 by kojii@chromium.org, Sep 2 2017

I can't reproduce. Can any of you please help us to figure out what's causing the problem?

At the URL below, which one is visible and which one is not? I guess at least 2nd item is not visible on your PC?
http://output.jsbin.com/gisubo

I can't see 2,3,7 in chrome and opera 
For example in firefox it is 4,7 if it could help

I have tried changed default font in my win 10 from segoe to arial for example but it is not the case, font changed but what was "invisible" still is invisible


Comment 6 by kojii@chromium.org, Sep 2 2017

#5: Thank you for the info, that is really helpful.

3 to 8 use features in CSS2. When implementing "system-ui" on Windows, we made it to use the same font family as 3. Interestingly, by reviewing code, 3 is internally alias to 7, so "2, 3, 7" makes sense.

The hypotheses are:
1. Somehow we fail 7 (small-caption) to render.
2. An old bug that mistakenly 3 (menu) use font family of 7 (small-caption).
3. We made "system-ui" to use the same family as 3 (menu).

The root cause is 1, but it's not easy to figure out what's causing this.

We could change 3 to alias to something working, such as 8 (status-bar), but it's probably worth to try to fix 2 first because it looks like more correct fix.

The risk is, the code path hasn't been used for a while and it may still not fix. We can try 3 then.
Ok If I could help you more, let me know, It might be problem with my fonts or something.
Maybe some special settings to set family for system-ui would be nice 

Comment 8 by kojii@chromium.org, Sep 2 2017

#7: Thank you for the offer, I'll try to fix 3 first, and if it works, 'system-ui' should also fix. Since I don't have reproducing environment, it'd be helpful to test Canary after the fix landed (hopefully sometime next week.) If it doesn't work, I'll try another fix.

> Maybe some special settings to set family for system-ui would be nice

Yeah, but the best part of 'system-ui' is it works for everyone on every platform without additional settings. Let me try these two possible fixes, and see how it goes.

Thank you for your help!
Project Member

Comment 9 by bugdroid1@chromium.org, Sep 5 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/6dc171cb297395eda261703fc5b13984d106f31a

commit 6dc171cb297395eda261703fc5b13984d106f31a
Author: Koji Ishii <kojii@chromium.org>
Date: Tue Sep 05 19:17:55 2017

Fix 'system-ui' and 'menu' is not rendered on some environments

On Windows, 'system-ui' uses the same font family as 'font: menu'.

 crbug.com/733219#c5  figured out that on some environments, 'menu' and
'small-caption' do not render.

The 'menu' has been incorrectly using the font family of 'small-caption'
since the beginning[1]. This patch fixes 'menu' to use the menu font
family.

If the fixed 'menu' does not render on such environments, we will try
another fix to use the font family from other system fonts.

[1] https://codereview.chromium.org/790733005

Bug:  733219 
Change-Id: Ie6bf6675269df6006fa88b9c79c6f57dfade6de6
Reviewed-on: https://chromium-review.googlesource.com/648528
Reviewed-by: Emil A Eklund <eae@chromium.org>
Commit-Queue: Emil A Eklund <eae@chromium.org>
Cr-Commit-Position: refs/heads/master@{#499699}
[modify] https://crrev.com/6dc171cb297395eda261703fc5b13984d106f31a/third_party/WebKit/Source/platform/fonts/FontCache.h

Cc: jmukthavaram@chromium.org
Labels: Needs-Feedback
Tested this issue on windows 10 using chrome#63.0.3207.0 & reported build M58 as per the below fiddle:

https://jsfiddle.net/9yeoLewo/

Observed same results on both M58 build & M63.

Kojii@,If possible ,let us know clear steps to test this issue from TE end .

Please find the attached screenshots for reference. Please confirm on the fix & the expected result.

Thanks..!
M58 result.JPG
114 KB View Download
M63 result.JPG
115 KB View Download
#10: this issue is reproducible only on some environment, and we don't have one. Thank you for checking though.
#7: The speculative fix in #9 is available in Canary, 63.0.3207.0 or later.

Could you please download Canary and see if it fixes your problem?
#12 good job
Now in this test http://output.jsbin.com/gisubo I see all except 7
Labels: -Needs-Feedback
Status: Verified (was: Assigned)
#13: Great, thank you so much for your help to fix this problem!

Sign in to add a comment