Bug 187090 – Too thin font rendering if opacity < 1 on 1x resolution display

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[HerrSiering]

Created attachment 343702 [details]
Left: Safari, right: Chrome

I found a rather strange rendering issue for fonts under certain conditions.

The basic setup is as follows: I animate the opacity of a link (white color) on hover. It has 0.75 opacity and an opacity of 1 on hover. The font is Fira Sans. Changing to a different font, e.g. -apple-system, does not change the behaviour, though.

The rendering in Safari macOS (Version 11.1.1 (13605.2.8)) is very thin compared to other browsers. This is happening on 1x resolution displays, on retina displays the font display is fine.

My guess at what is happening here:

My understanding is that Safari uses -webkit-font-smoothing: subpixel-antialiased as the default for rendering fonts. Which works great as long as you don't run the setup described above – opacity > 1, 1x resolution display. Then, some pixels are not rendered as font but rather as background, which results in a font display that rather reminds me of back-in-the-day IE6 font rendering than an optimized font.

Which would explain why this issue does not show up with higher pixel density. There are simply enough pixels present to warrant a good font display.

Using text-rendering: optimizelegibility; did not fix this. I also tried using -webkit-font-smoothing: antialiased – but that changes the font rendering in Chrome (Version 67.0.3396.87 (Official Build) (64-bit), but I guess that doesn't matter) to a too thick font display on macOS, unfortunately.

I was not able to find any further information anywhere on solving this, though I can't imagine no one else ran into this problem so far. Strange…

[HerrSiering]

I also recreated the issue in a Codepen: https://codepen.io/HerrBertling/pen/eKPgqx

[Simon Fraser (smfr)]

We can't easily do font smoothing when we render into the temporary buffer that is needed for opacity.

[HerrSiering]

I don't know a lot about what is going on in the browser's engine on such a deep level, but I guess that is Safari (architecture) specific? The font is rendering fine in Chrome with the same setup.

[HerrSiering]

Created attachment 344095 [details]
Zoomed in differences in rendering

My lovely colleague Silke provided a handy overview of what is happening both in Chrome and Safari :)

Also, thanks for the answer, Simon! My question from the other comment was not aimed at "Hey, the others are able to solve this, why not you?" – which I noticed could be read that way. Sorry for that. What I meant was: I'd like to understand what exactly is going wrong here and how this could be fixed.

Looking at Silke's screenshot, we assume that Chrome magically applies a different font smoothing for the lower opacity case somehow?

[Myles C. Maxfield]

(In reply to HerrSiering from comment #4)
> Created attachment 344095 [details]
> Zoomed in differences in rendering
> 
> My lovely colleague Silke provided a handy overview of what is happening
> both in Chrome and Safari :)
> 
> Also, thanks for the answer, Simon! My question from the other comment was
> not aimed at "Hey, the others are able to solve this, why not you?" – which
> I noticed could be read that way. Sorry for that. What I meant was: I'd like
> to understand what exactly is going wrong here and how this could be fixed.
> 
> Looking at Silke's screenshot, we assume that Chrome magically applies a
> different font smoothing for the lower opacity case somehow?

Which specific operating system are you testing on? The details of text antialiasing changed in macOS Mojave.

[Simon Fraser (smfr)]

opacity things never got smoothing.

[HerrSiering]

Hey Myles, the behaviour is observable in macOS 10.13.5 – my gut feeling says it was like this in earlier versions as well. Not able to test that, though.

[Brent Fulgham]

Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.