Pixelated Fonts in FF59-61 (Mac) using mix-blend-mode:darken

RESOLVED DUPLICATE of bug 1473041

Status

()

defect
P3
normal
RESOLVED DUPLICATE of bug 1473041
9 months ago
9 months ago

People

(Reporter: der, Unassigned)

Tracking

61 Branch
Unspecified
macOS
Points:
---

Firefox Tracking Flags

(firefox61 affected, firefox62 unaffected, firefox63 unaffected)

Details

(Whiteboard: [gfx-noted])

Attachments

(1 attachment)

Reporter

Description

9 months ago
Posted image ff_pixelation.png
User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36

Steps to reproduce:

Website display/opening on different (Mac)devices: 
I encountered a heavy pixelation in font-rendering on FF 59-61 (Mac OSX Sierra) 
(I'm not talking about antialiasing/subpixel rendering issues).



Actual results:

Font rendering of webfonts was heavily pixelated.



Expected results:

Other browsers and the same FF version on Windows displayed correctly.

My first idea was a corrupt font file or MacOSX font cache - excluding every webfont using basic system fonts (times, Arial etc.) didn't solve the problem.
Then I tried to isolate the problem ditching all scripts and gpu driven transforms.
Finally  I discovered the element causing this error was an 
absolute positioned div 
z-index on top of the pixelated text elements
with 'mix-blend-mode:darken'
containing an img

Deleting the mix-blend mode declaration solved the problem.

If you need further information I could send you a testlink.

Best regards,
Patrick
I wanted to test this issue but I do not have enough information. Could you please tell me more details about how to reproduce this issue?  I think it will be a good idea to provide your testlink. Thanks
Flags: needinfo?(der)
Reporter

Comment 2

9 months ago
(In reply to Daniel_A[:daschilean] from comment #1)
> I wanted to test this issue but I do not have enough information. Could you
> please tell me more details about how to reproduce this issue?  I think it
> will be a good idea to provide your testlink. Thanks

Hi Daniel,

I reduced the code and created a test link:
http://dev.rehma.de/bugzilla/
Download:
http://dev.rehma.de/bugzilla/bugzilla-data.zip

In FF 59-61 on MacOS 10.13 (everything fine in FF 58/OSX 10.13) 
Any text elements get pixelated on hover or mouse leave if a ':hover' color change is defined in css.
My html-document contains a div wrapping an image file (png) with 'mix-blend-mode:darken'.
At the bottom of the page there is an animated svg element (loading spinner with a 'animateTransform' within the svg file).

Either deleting the 'mix-blend-mode:darken' attribute or 
changing the svg file to a static/non-animated svg image or
deleting the color change on hover
solved the problem.

Best regards,
Patrick
Flags: needinfo?(der)
User Agent:  Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:61.0) Gecko/20100101 Firefox/61.0 
Build ID: 20180621125625                   
I manage to reproduce this issue on Mac 10.12 with the latest Firefox release version 61.0.2 (64-bit).
Status: UNCONFIRMED → NEW
Component: Untriaged → Graphics
Ever confirmed: true
OS: Unspecified → Mac OS X
Product: Firefox → Core
I believe this was fixed by bug 1473041 (which was originally filed for Linux, but was the same issue as this). If you try a current version of Firefox Beta (62), you should be able to confirm that the problem no longer occurs.
Please reopen if it isn't working in 62 beta or nightly.
Status: NEW → RESOLVED
Last Resolved: 9 months ago
Priority: -- → P3
Resolution: --- → DUPLICATE
Whiteboard: [gfx-noted]
Duplicate of bug: 1473041
You need to log in before you can comment on or make changes to this bug.