1233699 - Using CSS filter: opacity causes rendering glitch

Status: RESOLVED WORKSFORME

(Core :: Graphics, defect)

Description

[cs.rakowski]

Attachment: firefox 44a-2015-12-18 graphics issue.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.106 Safari/537.36

Steps to reproduce:

Browse to: http://kangax.github.io/compat-table/es6/ using FireFox Developer edition: 44.0a2 (2015-12-14)
Notice rendering glitch on the columns for 'unstable/obsolete' browsers and platforms.

I played around with the CSS a little bit and removing the "filter: opacity" from the CSS for .obsolete, .unstable 'fixes' the issue. I might be wrong, but I hope this can at least point you in the right direction.


Actual results:

Columns where the CSS filter: opacity is applied have weird rendering glitch. (see attached screenshot)


Expected results:

Columns should be shown without the black spots.

Comment 1

[cs.rakowski]

PS: I am using Windows 10 Pro (64-Bit) with all the latest updates installed.
Also, not sure if it matters, but my laptop has an NVidia GeForce GTX 960M videochip and Intel i7-6700HQ processor.

Comment 2

[Jamie Nicol [:jnicol]]

I cannot reproduce this on Linux.

Does this problem occur on the stable version of firefox, or did it use to work ever? If it is a regression, would you be able to find the regression range. (see http://mozilla.github.io/mozregression/)

Could you also check if disabling hardware acceleration makes the problem go away? Thanks.

Comment 3

[cs.rakowski]

I just tried it on the stable release (43.0.1) and it occurred there too.
When I flipped the hardware acceleration off, the issue went away in both versions (stable and developer).

In order to 'prove' this switch actually made a difference, I flipped hardware acceleration back on and tried testing it again. Now both releases load the page just fine without any graphical glitches.
I went back and forth with this a bit, but I can't seem to be able to reproduce the issue anymore.

I will try again in the morning (CET) and let you know if I can get it to reproduce again.

Comment 4

[cs.rakowski]

I tried several things today, but can't get it to reproduce anymore.
I will keep my eyes open to see it if happens again, but for now I guess the issue has "resolved" itself.

Comment 5

[cs.rakowski]

I just had it happen again using the 45.0a2 Developer Edition and, just like before, once I flipped hardware acceleration off it went away and when I turned it back on, the issue stayed away.

I have been able to 'confirm' that when it does happen, refreshing the page does consistently cause the glitch. I'm not sure, but this would make it seem like it might be connected to the browser process' lifespan, instead of the 'page lifecycle'. I have read on the internet that the new Skylake graphics drivers for Windows 10 are still a bit buggy, so it might be related to that.

I have used the NVidia Control Panel to configure Firefox to always run on the NVidia chip. If the issue occurs again, we can at least rule out the Skylake angle.

Comment 6

[Gregory Pappas [:gregp]]

Works as expected in recent versions.