1203649 - Grainy text on non-retina display on retina machine

Status: RESOLVED DUPLICATE of bug 1122916

(Core :: Graphics: Text, defect)

Description

[Andreas Tolfsen ❲:ato❳]

On a retina MacBook connected to a non-retina display (a Dell U2412M specifically), some text appears particularly grainy.

Applying the style -moz-osx-font-smoothing: greyscale appears to fix the issue.

I’ve attached a few screenshots to illustrate the problem.

Comment 1

[Andreas Tolfsen ❲:ato❳]

Attachment: no-font-smoothing.png

Comment 2

[Andreas Tolfsen ❲:ato❳]

Attachment: osx-font-smoothing.png

Comment 3

[Andreas Tolfsen ❲:ato❳]

Attachment: grainy-bugzilla.png

Comment 4

[Andreas Tolfsen ❲:ato❳]

The documented used in two of the screenshots to illustrate this is https://w3c.github.io/webdriver/webdriver-spec.html

Comment 5

[Andreas Tolfsen ❲:ato❳]

Attachment: tc1203649.html

Under a somewhat bizarre set of circumstances I’ve been able to reproduce this:

1. The document must have no doctype
2. Containing element must have the following styles set:

     background-attachment: fixed
     background-image: url()
     height: 101%

3. You must display the page on a non-retina display connected to a retina Mac.

The height can be greater, as long as it’s over 100vh (the full height of the initial viewport).

The background-image can be something else, as long as it uses a URL scheme.

Comment 6

[Andreas Tolfsen ❲:ato❳]

Attachment: tc2303649.png

Attaching screenshot of TC.

Comment 7

[Andreas Tolfsen ❲:ato❳]

Was advised by edwin to redirect the ni request.

I somewhat suspect this issue surfaces from time to time on both MozReview and Gmail, for what it matters.

Comment 8

[Jonathan Kew [:jfkthame]]

I notice that the "bad" rendering seems to lack subpixel antialiasing; but it looks kinda like maybe the glyphs were rasterized for subpixel, and then lost their color components somewhere along the way, or something like that. That could explain why adding -moz-osx-font-smoothing: greyscale improves things, as the glyphs would then be rasterized for greyscale rendering from the start.

Does it improve if you disable e10s? And/or if you disable APZ? I suspect either or both of those may be affecting the rendering.

Comment 9

[Jonathan Kew [:jfkthame]]

A couple of observations:

(1) You can reproduce the issue without an external (non-retina) display if you run Nightly in low-res (choose the Open in Low Resolution checkbox in the app's Get Info).

(2) The problem does in fact exist at hi-dpi (on a retina screen) too, but the resolution is such that it's scarcely visible. If you magnify the screen (with a good magnifying glass, or the OS's screen zoom feature from Accessibility) you can see the difference between "good" and "bad" rendering in your testcase when you enable/disable one of those key styles (comment 5).

I think this is an APZ-related issue, and occurs when the text ends up in a scrollable layer above the (static) background. Or something. :kats, can you take a look, or find a suitable victim?

Comment 10

[Kartikaya Gupta (email:[e-mail])]

Thanks for the investigation! This sounds related to bug 1122916, so I'm going to pass along the needinfo to markus to see if his work on the dependent bug fixes this as well.

Comment 11

[Markus Stange [:mstange]]

Yup, this is caused by broken component alpha layers. Bug 1122916, or rather bug 1147673, will fix this.

Comment 12

[Andreas Tolfsen ❲:ato❳]

Excellent, thank you for the swift responses!  Please feel free to re-purpose the reproducible test case attached to this bug as a reference test if that helps future regressions in this area.