New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 637485 link

Starred by 2 users

Issue metadata

Status: WontFix
Owner: ----
Closed: Aug 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Android
Pri: 2
Type: Bug-Regression



Sign in to add a comment

Pale font on mercurynews.com

Project Member Reported by aelias@chromium.org, Aug 13 2016

Issue description

Repro on 52.0.2743.98 and 53.0.2785.57 and 54.0.2825.0.
No repro on 51.0.2672.0
Android versions tested: NRD90M and MMB29M

As a regression starting in M52, the text on mercurynews.com articles is now pale to the point of being hard to read.  It doesn't look as pale in either mobile Firefox nor iOS Safari.

Computed style is:

font: 200 1em/1.6 Helvetica,Helvetica,Arial,sans-serif;
    font-style: normal;
    font-variant-ligatures: normal;
    font-variant-caps: normal;
    font-variant-numeric: normal;
    font-weight: 200;
    font-stretch: normal;
    font-size: 1em;
    line-height: 1.6;
    font-family: Helvetica, Helvetica, Arial, sans-serif;
    color: #333;
    background-color: #FFF;
 
mercurynews51.png
1014 KB View Download
mercurynews52.png
1.3 MB View Download

Comment 1 by rbayardo@google.com, Aug 13 2016

It seems that "font-weight: lighter;" is now interpreted as "font-weight: WAY lighter".  I had to change my site to use "font-weight: 300;" to work around the fonts becoming too faint to read all of a sudden on Chrome+Android.
I'm a bit suspicious of the 'computed' weight of 200. As far as I can tell, a default build of Android will have 100, 300, 400, 500, 700, and 900 weights. The only way I think you'd end up with an actual 200 weight is if it's actually a web font. At the bottom of the 'Computed' pane in the inspector in the 'Rendered Fonts' section does it claim it a local file? In the '52' screen capture it rather looks like Roboto 100, which is what you'd actually end up with when requesting Helvetica 200.

Looking at https://www.w3.org/TR/css-fonts-3/#bolderlighter , apparently this was supposed to be 100 by the specification (I have to disagree with that table, it's a little crazy, but maybe its that way because so few fonts have different weights).

In any event, the list of changes that caused this is

https://skia.googlesource.com/skia/+/11a77c6e0634e2feb6fe4e74806db2fdd2a799ec
https://chromium.googlesource.com/chromium/src/+/932bd23be9a6b3738ec2f3593fa2fdf8326d5ab2
https://chromium.googlesource.com/chromium/src/+/f24ce736e38fa9b159d59dab44b7cc2c69a67849
https://skia.googlesource.com/skia/+/ed2edabd07086bbf60df17ca0bf52d8ba49f2273

where the third one above would be 'blamed' for this in Chromium. Essentially, 'font-weight: lighter' wasn't working at all if the initial weight was less than 600. Mobile FireFox on Android probably acts the same way Chromium used to, it may end up acting like new Chromium in the future here.

As a result, I think this is mostly 'as expected' except for the inspector claiming a computed weight of '200'.

Comment 3 by aelias@chromium.org, Aug 15 2016

As far as inspector is concerned, I see 200 everywhere.  "200" is what the mercurynews CSS wrote (not "lighter") -- it doesn't seem to be a webfont and you are likely right that it was resolved to Roboto 100, but perhaps that's beyond devtools' awareness.

This weekend I also noticed another repro on the subheaders of nymag.com homepage (screenshot attached).  On that page, the font-weight: 100 is explicitly specified in the CSS under ".feedlink p".
nymag-52-palefont.png
521 KB View Download

Comment 4 by aelias@chromium.org, Aug 15 2016

Anyway, it sounds like we changed to better respect the CSS that was specified all along, but it's unfortunate that this makes Chrome paler than all other browsers.  In particular, iOS Safari has much denser fonts (see two screenshots taken on my ipod touch of the same sites).  This might just be due to Apple's font having a higher minimum weight than Roboto.

Not sure what action to take, but this probably means we can expect a steady trickle of bugs filed against Chromium on this, until all affected pages correct their CSS.
nymag-ipodtouch.png
273 KB View Download
mercurynews-ipodtouch.png
144 KB View Download

Comment 5 by aelias@chromium.org, Aug 15 2016

Status: WontFix (was: Available)
Anyway, this wasn't noticed in beta channel and already shipped (that's an indication the magnitude of the problem is tolerable), bungeman@'s analysis is that the behavior is correct in principle, and there probably isn't any way to make lighter weights newly available without incurring a problem like this.  So unless a further reason comes up, let's close as working-as-intended and wait for webdevs to update their CSS.
If I understand correctly, on 51 you asked for 200 but were actually getting 400; the inspector said 200 because that was the computed css value (but obviously not the resolved value of the final selected font). In 52 you asked for 200 but actually got 100 (what the spec says should be done), the inspector continues to report 200 because that is still the computed css value.

On nymag something similar happened, they were asking for 100 but were getting 400, now they're actually getting 100.

The most dramatic differences can of course be seen on demonstration pages, like http://www.quirksmode.org/css/text/fontweight.html . On Chrome 51 there are two weights displayed, on Chrome 52 with newer Android there are 6.

It would be nice if the inspector 'Rendered Fonts' section displayed more information about the resolved font. In addition to the name it would be nice to know the actual resolved styles (especially the weight). The information appears to be collected at InspectorCSSAgent::collectPlatformFontsForLayoutObject . This part is probably a dup of issue 593584 , and interested parties should star that bug. If developers could see that they were asking for 200 and getting 400 in M51 and asking for 200 and getting 100 in M52, it would be way easier for everyone to figure out what is going on.

Sign in to add a comment