[Webkit-unassigned] [Bug 187090] New: Too thin font rendering if opacity < 1 on 1x resolution display

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=187090

            Bug ID: 187090
           Summary: Too thin font rendering if opacity < 1 on 1x
                    resolution display
           Product: WebKit
           Version: Safari 11
          Hardware: Macintosh
                OS: macOS 10.13
            Status: NEW
          Severity: Minor
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: markus277 at gmail.com

Created attachment 343702

  --> https://bugs.webkit.org/attachment.cgi?id=343702&action=review

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…

-- 
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/20180627/cd9f3dc8/attachment.html>