Font smoothing on 2019 Macbook Pro 16" does not match Safari (looks more bold)
Categories
(Core :: Graphics: Text, defect, P3)
Tracking
()
People
(Reporter: yoasif, Assigned: sam, NeedInfo)
References
(Blocks 1 open bug, )
Details
Attachments
(8 files)
firefox-mac.png
Initially reported https://www.reddit.com/r/firefox/comments/fq4myb/considering_switching_to_firefox_but_fonts_look/
Steps to reproduce:
- Navigate to https://www.reddit.com/r/firefox/comments/fq4myb/considering_switching_to_firefox_but_fonts_look/
What happens:
Text appears bolder than both Safari and Chrome on the same device.
User says this occurs everywhere, but can be seen in the post above - user has provided screenshots.
User is using default scaling settings on macOS and "Use font smoothing when available".
User sees the same issue on Nightly.
|
Reporter | |
Updated•4 years ago
|
|
|
Reporter | |
Comment 1•4 years ago
|
||
|
|
Reporter | |
Comment 2•4 years ago
|
||
|
|
Reporter | |
Comment 3•4 years ago
|
||
|
||
Comment 4•4 years ago
|
||
:yoasif, if you think that's a regression, then could you try to find a regression range in using for example mozregression?
|
||
Comment 5•4 years ago
|
||
The reddit page mentioned has a webkit-specific rule -webkit-font-smoothing: antialiased on the <body> element, which affects the antialiasing used. (If you use the Safari inspector to disable that rule, you'll see the rendering become like Firefox.)
The equivalent rendering in Firefox can be achieved with -moz-osx-font-smoothing: grayscale, though in my testing it seems to be necessary to trigger a refresh of the display (e.g. by resizing the window) to see the effect after adding it in the Inspector.
Maybe we should try aliasing -webkit-font-smoothing: antialiased to the Gecko property? I thought we'd considered that in the past, but don't recall what we concluded, if anything.
|
||
Comment 6•4 years ago
|
||
(In reply to Jonathan Kew (:jfkthame) from comment #5)
Maybe we should try aliasing
-webkit-font-smoothing: antialiasedto the Gecko property? I thought we'd considered that in the past, but don't recall what we concluded, if anything.
Seems like a relatively low effort thing to do. I assume that there is no hope of standardizing a font-smoothing property since it's quite platform specific (though it does feel somewhat similar to shape-rendering?) and so that makes it more palatable to implement the -webkit alias.
Does Chrome on macOS also follow -webkit-font-smoothing?
|
|
||
Comment 7•4 years ago
|
||
(In reply to Cameron McCormack (:heycam) from comment #6)
(In reply to Jonathan Kew (:jfkthame) from comment #5)
Maybe we should try aliasing
-webkit-font-smoothing: antialiasedto the Gecko property? I thought we'd considered that in the past, but don't recall what we concluded, if anything.Seems like a relatively low effort thing to do. I assume that there is no hope of standardizing a font-smoothing property since it's quite platform specific (though it does feel somewhat similar to shape-rendering?) and so that makes it more palatable to implement the -webkit alias.
I'm not sure. I can't recall offhand whether webkit/blink do something with this property on non-macOS platforms. There was some discussion of this on the old www-style mailing list back in 2012, but I'd need to go back and refresh my memory about the details. And of course things may have changed since then.
Does Chrome on macOS also follow -webkit-font-smoothing?
Yes.
|
||
Updated•4 years ago
|
|
|
||
Comment 8•4 years ago
|
||
Out of curiosity, I experimented with Chrome on both Windows and Linux, and AFAICS it doesn't change text rendering at all in response to -webkit-font-smoothing, although the devtools inspector exposes the property name & values.
|
||
Comment 9•4 years ago
|
||
Because this bug's Severity has not been changed from the default since it was filed, and it's Priority is P3 (Backlog,) indicating it has been triaged, the bug's Severity is being updated to S3 (normal.)
|
Assignee | |
Comment 10•4 years ago
|
||
FWIW, this also occurs on https://old.reddit.com which doesn't use -webkit-font-smoothing. Nightly is on the left, Safari is on the right.
This issue doesn't occur when the "Use font smoothing when available" option in System Preferences > General is disabled, but that option is no longer present in System Preferences in 10.15.
|
|
Assignee | |
Comment 11•4 years ago
|
||
(In reply to Sam Johnson from comment #10)
This issue doesn't occur when the "Use font smoothing when available" option in System Preferences > General is disabled, but that option is no longer present in System Preferences in 10.15.
Here's another comparison to substantiate the claim above. This is with "Use font smoothing when available" disabled-- Nightly on left, Safari on right, and Nightly looks great.
|
||
Comment 12•4 years ago
•
|
||
Okay, so we seem to be having two issues here:
- On pages which use
-webkit-font-smoothing: antialisedbut not-moz-osx-font-smoothing: grayscale(e.g. new Reddit), Safari and Chrome have lighter fonts than Firefox. - On macOS 10.15+, pages which do not use either of those properties (e.g. Google Calendar, old Reddit) still have slightly lighter fonts in Safari and Chrome than in Firefox. (But not quite as light as with font smoothing turned off /
-webkit-font-smoothing: antialisedset.)
(And then there's the question of whether the slightly bolder look is preferable or not.)
I've filed bug 1670993 about case 1. Let's keep this bug about case 2.
Lee, have you seen this bug before? (Did we maybe even talk about it?) Chrome is showing the "lighter" look, so I suspect their Skia font code (preblending with a different gamma?) must have diverged from ours.
|
||
Comment 13•3 years ago
•
|
||
(In reply to Markus Stange [:mstange] from comment #12)
Okay, so we seem to be having two issues here:
- On pages which use
-webkit-font-smoothing: antialisedbut not-moz-osx-font-smoothing: grayscale(e.g. new Reddit), Safari and Chrome have lighter fonts than Firefox.- On macOS 10.15+, pages which do not use either of those properties (e.g. Google Calendar, old Reddit) still have slightly lighter fonts in Safari and Chrome than in Firefox. (But not quite as light as with font smoothing turned off /
-webkit-font-smoothing: antialisedset.)(And then there's the question of whether the slightly bolder look is preferable or not.)
I've filed bug 1670993 about case 1. Let's keep this bug about case 2.
Lee, have you seen this bug before? (Did we maybe even talk about it?) Chrome is showing the "lighter" look, so I suspect their Skia font code (preblending with a different gamma?) must have diverged from ours.
Skia uses a different solution for representing subpixel AA glyph masks than we do. We originally came up with the solution together of using a light-on-dark or dark-on-light mask depending on the color of the text, such that we have two different masks to match what we observed to be happening with native text rendering at the time. Chrome/Skia went in a different direction of just using a single mask regardless by altering the luminance of the text's color but just always querying the mask via black-text-on-white-background rendering.
It would be worth someone investigating whether we just want to kill off our specific solution and fall in with the Chrome approach, of if we still prefer to keep our specific workaround here.
Our solution: https://searchfox.org/mozilla-central/source/gfx/skia/skia/src/ports/SkFontHost_mac.cpp#2450
Skia's solution: https://searchfox.org/mozilla-central/source/gfx/skia/skia/src/ports/SkFontHost_mac.cpp#2465
Given that font smoothing is solidly in the retirement process on macOS, and to ease the future Skia updating burden, I would be open to just retiring our specific solution going forward in the next Skia update if we don't much mind the change in look in cases where users still have font-smoothing enabled.
|
|
||
Updated•3 years ago
|
|
|
Assignee | |
Comment 14•6 months ago
|
||
This still seems to be an issue on current Nightly. Here is a fairly straightforward reproduction:
data:text/html,<p style='color:gray'>Hello world!</p>
As you can see in the attached screenshot, with Nightly on the left and Safari on the right, there is a pretty big difference in rendering with default OS settings on a non-retina display.
Note that this seems to have something to do with text color. If you change the above example to use black, the issue goes away.
|
|
Assignee | |
Comment 15•6 months ago
|
||
(In reply to Lee Salzman [:lsalzman] from comment #13)
(In reply to Markus Stange [:mstange] from comment #12)
Okay, so we seem to be having two issues here:
- On pages which use
-webkit-font-smoothing: antialisedbut not-moz-osx-font-smoothing: grayscale(e.g. new Reddit), Safari and Chrome have lighter fonts than Firefox.- On macOS 10.15+, pages which do not use either of those properties (e.g. Google Calendar, old Reddit) still have slightly lighter fonts in Safari and Chrome than in Firefox. (But not quite as light as with font smoothing turned off /
-webkit-font-smoothing: antialisedset.)(And then there's the question of whether the slightly bolder look is preferable or not.)
I've filed bug 1670993 about case 1. Let's keep this bug about case 2.
Lee, have you seen this bug before? (Did we maybe even talk about it?) Chrome is showing the "lighter" look, so I suspect their Skia font code (preblending with a different gamma?) must have diverged from ours.
Skia uses a different solution for representing subpixel AA glyph masks than we do. We originally came up with the solution together of using a light-on-dark or dark-on-light mask depending on the color of the text, such that we have two different masks to match what we observed to be happening with native text rendering at the time. Chrome/Skia went in a different direction of just using a single mask regardless by altering the luminance of the text's color but just always querying the mask via black-text-on-white-background rendering.
It would be worth someone investigating whether we just want to kill off our specific solution and fall in with the Chrome approach, of if we still prefer to keep our specific workaround here.
Our solution: https://searchfox.org/mozilla-central/source/gfx/skia/skia/src/ports/SkFontHost_mac.cpp#2450
Skia's solution: https://searchfox.org/mozilla-central/source/gfx/skia/skia/src/ports/SkFontHost_mac.cpp#2465Given that font smoothing is solidly in the retirement process on macOS, and to ease the future Skia updating burden, I would be open to just retiring our specific solution going forward in the next Skia update if we don't much mind the change in look in cases where users still have font-smoothing enabled.
I believe this issue lies within WR rather than Skia. The following patch fixes the text rendering on my machine to appear consistent with other apps.
diff --git a/gfx/wr/wr_glyph_rasterizer/src/platform/macos/font.rs b/gfx/wr/wr_glyph_rasterizer/src/platform/macos/font.rs
--- a/gfx/wr/wr_glyph_rasterizer/src/platform/macos/font.rs
+++ b/gfx/wr/wr_glyph_rasterizer/src/platform/macos/font.rs
@@ -737,9 +737,9 @@ impl FontContext {
// We explicitly do not do this for grayscale AA ("Alpha without
// smoothing" or Mono) because those rendering modes are not
// gamma-aware in CoreGraphics.
- self.gamma_lut.coregraphics_convert_to_linear(
- &mut rasterized_pixels,
- );
+ //self.gamma_lut.coregraphics_convert_to_linear(
+ // &mut rasterized_pixels,
+ //);
}
for pixel in rasterized_pixels.chunks_mut(4) {
@@ -765,11 +765,11 @@ impl FontContext {
// some "preblending" based on the text color.
// In Alpha + smoothing mode, this will also convert subpixel AA
// into grayscale AA.
- self.gamma_correct_pixels(
- &mut rasterized_pixels,
- font.render_mode,
- font.color,
- );
+ //self.gamma_correct_pixels(
+ // &mut rasterized_pixels,
+ // font.render_mode,
+ // font.color,
+ //);
}
}
Note that macOS no longer has subpixel AA, so I believe this code is no longer needed.
|
|
Assignee | |
Comment 16•5 months ago
|
||
Until macOS 10.14, "font smoothing" meant sub-pixel antialiasing of text. However, since macOS 10.14, sub-pixel antialiasing is no longer supported. Gamma correction is necessary for sub-pixel font smoothing, but it produces undesirable effects with grayscale font smoothing.
Firefox does not support any macOS versions with sub-pixel font smoothing, so the gamma correction code has been removed. This improves font rendering, especially on non-retina displays, to match other applications and browsers.
|
||
Updated•5 months ago
|
|
|
||
Updated•5 months ago
|
|
|
||
Updated•5 months ago
|
Description
•