Grainy text on non-retina display on retina machine




3 years ago
3 years ago


(Reporter: ato, Unassigned)


Firefox Tracking Flags

(Not tracked)


(Whiteboard: [gfx-noted])


(5 attachments)



3 years ago
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

3 years ago
Created attachment 8659401 [details]

Comment 2

3 years ago
Created attachment 8659402 [details]

Comment 3

3 years ago
Created attachment 8659403 [details]

Comment 4

3 years ago
The documented used in two of the screenshots to illustrate this is
Whiteboard: [gfx-noted]

Comment 5

3 years ago
Created attachment 8661183 [details]

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.
Flags: needinfo?(jdaggett)

Comment 6

3 years ago
Created attachment 8661184 [details]

Attaching screenshot of TC.

Comment 7

3 years ago
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.
Flags: needinfo?(jdaggett) → needinfo?(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.
Flags: needinfo?(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?
Flags: needinfo?(bugmail.mozilla)
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.
Flags: needinfo?(bugmail.mozilla) → needinfo?(mstange)
Yup, this is caused by broken component alpha layers. Bug 1122916, or rather bug 1147673, will fix this.
Last Resolved: 3 years ago
Flags: needinfo?(mstange)
Resolution: --- → DUPLICATE
Duplicate of bug: 1122916

Comment 12

3 years ago
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.
You need to log in before you can comment on or make changes to this bug.