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

Status: RESOLVED DUPLICATE of bug 1473041

(Core :: Graphics, defect, P3)

Description

[herrstrietzel]

Attachment: 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

Comment 1

[Daniel_A[:daschilean] [Please contact - [e-mail]]]

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

Comment 2

[herrstrietzel]

(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

Comment 3

[Daniel_A[:daschilean] [Please contact - [e-mail]]]

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).

Comment 4

[Jonathan Kew [:jfkthame]]

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.

Comment 5

[Andrew Osmond [:aosmond] (he/him)]

Please reopen if it isn't working in 62 beta or nightly.