[Webkit-unassigned] [Bug 69214] Font rendering issue when using opacity in CSS with Google Web Fonts

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Tue Jun 26 08:42:02 PDT 2018


HerrSiering <markus277 at gmail.com> changed:

           What    |Removed                     |Added
                 CC|                            |markus277 at gmail.com

--- Comment #2 from HerrSiering <markus277 at gmail.com> ---
I've come across a very similar issue but couldn't find anything related except for this bug, so I'll put what happens for me into this one as additional information.

The scenario is similar to the one described here: I animate the opacity of a link (white) on hover. It has 0.75 opacity and an opacity of 1 on hover. The font is Fira Sans. Changing to 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 :(

Since this bug is rather old: Will this be addressed or will this stay as is?

You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20180626/9c67571f/attachment.html>

More information about the webkit-unassigned mailing list