1554492 - Webrender forces grayscale font rendering for text with mask-image CSS property

Status: UNCONFIRMED

(Core :: Graphics: WebRender, defect, P3)

Description

[[:estemal]]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:60.0) Gecko/20100101 Firefox/60.0

Steps to reproduce:

1. Use Firefox 67 on wayland (sway compositor).
2. Set gfx.webrender.enable = true in about:config
3. Restart firefox.

Actual results:

Font rendering in chrome (i.e. tab headers) became grayscale.

Expected results:

Subpixel font antaliasing as with default opengl rendering.

Comment 1

[Robert Mader [:rmader]]

This seems to be a duplicate of bug 1568603 (or the other way around)

Comment 2

[Lee Salzman [:lsalzman]]

(In reply to robert.mader from comment #1)

This seems to be a duplicate of bug 1568603 (or the other way around)

Not a dup. That bug is about subpixel positioning, whereas this is about subpixel anti-aliasing.

Comment 3

[[:estemal]]

I've found the culprit. The problem is that too long page headers in the tab panel are rendered with mask-image CSS property (to add the "fade-out" effect to the cropped line end). With this property text is rendered with grayscale AA. I've just tested on this actual page, adding to any text block mask-image: linear-gradient(to left, transparent, black 50em); make this block rendered with grayscale AA.

Comment 4

[[:estemal]]

As a workaround I added

.tab-label-container {
	mask-image: none !important;
}

to my userChrome.css

Comment 5

[Anwar]

I was having issues with grayscale-rendering on wayland session and reached on this bug. The setting gfx.webrendere.enable was false in my case. I changed that to true and applied the workaround posted by Eternal Sorrow. Now the issue is gone.

Comment 6

[Wayne Mery (:wsmwk)]

Is this still broken for you when using a current version, without the workaround?

Comment 7

[[:estemal]]

Yes, it is.

Comment 8

[[:estemal]]

Attachment: 2021-10-19-141822.png

See for yourself (turn off zoom in smoothing in your image viewer and zoom the image in).

Comment 9

[[:estemal]]

Attachment: 2021-10-19-142003.png

Urlbar for comparison - has normal RGBA antialiasing.

Comment 10

[BugBot [:suhaib / :marco/ :calixte]]

Clear a needinfo that is pending on an inactive user.

Inactive users most likely will not respond; if the missing information is essential and cannot be collected another way, the bug maybe should be closed as INCOMPLETE.

For more information, please visit auto_nag documentation.