1794086 - PDF rendering on Windows 11 is incorrect with gfx.canvas.accelerated set to true

Status: NEW

(Core :: Graphics: Canvas2D, defect)

Description

[Calixte Denizet (:calixte)]

Attachment: image.png

With the pref on, the glyphs look bolder (left part on the picture) and with my screen (LG Ultrafine 27-inch 4K IPS Monitor) I can see a lot of pale green and pale red stains everywhere which make the reading painful.

Comment 1

[Calixte Denizet (:calixte)]

Attachment: screen_picture_pref_on.jpg

Comment 2

[Calixte Denizet (:calixte)]

Attachment: screen_picture_pref_off.jpg

Comment 3

[Ashley Hale [:ahale]]

Colored text edges sounds like ClearType may not be configured correctly for your display, Firefox respects the system settings for ClearType (which treats the RGB pixels as a higher resolution display but can result in color fringing) as do other applications, perhaps you wish to turn off ClearType?

If you right click the desktop, choose Personalize, then Fonts -> Related Settings -> Adjust ClearType text, you can choose whether you wish to use ClearType or not on your display and it offers the option of changing the subpixel arrangement. You can also turn off ClearType easily there.

I find it interesting that accelerated canvas is rendering ClearType differently than unaccelerated canvas, so there may be a bug to explore.

If you go to the URL about:support in Firefox and copy to clipboard, you can paste that in an attachment and we can get additional ideas on the nature of this bug from that information.

Comment 4

[Calixte Denizet (:calixte)]

Attachment: about:support

Comment 5

[Ashley Hale [:ahale]]

Attachment: tracemonkey-pdf-multiple-browsers.png

Accelerated canvas Firefox has backwards subpixel AA compared to Edge and Chrome and non-accelerated canvas Firefox.

Comment 6

[Ashley Hale [:ahale]]

Triage - rating as S2 for now because if we enable gfx.canvas.accelerated by default this will look quite bad.

I attempted to reproduce this issue on Firefox (with the gfx.canvas.accelerated pref on, and off) and Chrome and Edge with ClearType enabled and disabled, and I see color fringing (i.e. ClearType) on every combination except gfx.canvas.accelerated=true with ClearType=off which is genuinely grey shades rather than color fringing (weirdly Edge and Chrome still do ClearType in this case, and so does Firefox with unaccelerated canvas).

More worryingly, accelerated canvas with ClearType on has backwards subpixel coloring as far as I can tell - comparing which side of the letters has red vs cyan color fringing you can see the middle one in comment #5 is backwards and that is Firefox with accelerated canvas.

Examining the picture in comment #1, the ClearType subpixel AA is almost certainly backwards, leading to a greatly magnified amount of color fringing, whereas in comment #2 the ClearType subpixel AA seems to be working correctly, color fringing is present but it is expected to be like that.

I will bring this up in our bug triage meeting as we've been discussing ClearType recently and this shows a genuine problem with the way it is being done in accelerated canvas - it is hopefully a very simple fix, but we need to look at this carefully. I'm also curious why turning off ClearType has no apparent effect on unaccelerated canvas (but it also doesn't have any apparent effect on PDF rendering in Chrome or Edge, which is even more curious, because getting ClearType subpixel arrangement wrong can look really bad, it's not really safe for them to assume they can use it when it is turned off).