Ubuntu – Firefox 64.0 renders content transparent

18.04firefoxnvidia

Since this unattended upgrade (excerpt from /var/log/apt/history.log), Firefox seems to be unusable because of rendering problems. The content in the main window is kind of transparent.

Start-Date: 2018-12-12  21:03:06
Commandline: /usr/bin/unattended-upgrade
Upgrade: firefox:amd64 (63.0.3+build1-0ubuntu0.18.04.1, 64.0+build3-0ubuntu0.18.04.1)
End-Date: 2018-12-12  21:03:15

Start-Date: 2018-12-12  21:03:19
Commandline: /usr/bin/unattended-upgrade
Upgrade: firefox-locale-de:amd64 (63.0.3+build1-0ubuntu0.18.04.1, 64.0+build3-0ubuntu0.18.04.1)
End-Date: 2018-12-12  21:03:19

Start-Date: 2018-12-12  21:03:21
Commandline: /usr/bin/unattended-upgrade
Upgrade: firefox-locale-en:amd64 (63.0.3+build1-0ubuntu0.18.04.1, 64.0+build3-0ubuntu0.18.04.1)
End-Date: 2018-12-12  21:03:22

At first, i suspected it to be a Nvidia driver issue, so i upgraded from nvidia-driver-390:

nils@nyx:~$ apt-cache policy nvidia-driver-390
nvidia-driver-390:
  Installiert:           (keine)
  Installationskandidat: 390.87-0ubuntu0~gpu18.04.1
  Versionstabelle:
     390.87-0ubuntu0~gpu18.04.1 500
        500 http://ppa.launchpad.net/graphics-drivers/ppa/ubuntu bionic/main amd64 Packages
     390.77-0ubuntu0.18.04.1 500
        500 http://de.archive.ubuntu.com/ubuntu bionic-updates/restricted amd64 Packages
     390.48-0ubuntu3 500
        500 http://de.archive.ubuntu.com/ubuntu bionic/restricted amd64 Packages

to nvidia-driver-396:

nils@nyx:~$ apt-cache policy nvidia-driver-396 
nvidia-driver-396:
  Installiert:           396.54-0ubuntu0~gpu18.04.1
  Installationskandidat: 396.54-0ubuntu0~gpu18.04.1
  Versionstabelle:
 *** 396.54-0ubuntu0~gpu18.04.1 500
        500 http://ppa.launchpad.net/graphics-drivers/ppa/ubuntu bionic/main amd64 Packages
        100 /var/lib/dpkg/status

But it didn't fix anything.

The problem looks like this:
Problem

Notice the front wheel of the motorbike image behind Firefox appearing in the image from the new tab page. This got me thinking, the parts of the new tab image, that are over dark parts of the image behind it, appear kind of normal. So i created a black.png and have this (directly) behind Firefox.

This looks like this, quite normal, as expected:
Expectation

The About Mozilla Firefox window seems not affected, even when the image is acquired by AltPrint:
About not affected

For the main window, creating the image by AltPrint is even worse:
About not affected

Only the window decorator is there, the content of the window is completely transparent.

So it seems like the value/lightness (as in HSV/HSL) from the pixel in the application behind Firefox controls the alpha/tranparency value for that pixel in Firefox itself.

After some googling I suspected the hardware acceleration. But turning it off made no difference:
About not affected

The only thing that helps, is a black background:
About not affected

When started from the shell, there is the following output:

nils@nyx:~$ firefox

(firefox:6467): Gtk-WARNING **: 23:50:19.849: Theme parsing error: <data>:1:34: Expected ')' in color definition

(firefox:6467): Gtk-WARNING **: 23:50:19.849: Theme parsing error: <data>:1:77: Expected ')' in color definition

It's the same with thunderbird, but there are no rendering problems.

nils@nyx:~$ thunderbird

(thunderbird:7059): Gtk-WARNING **: 23:52:38.204: Theme parsing error: <data>:1:34: Expected ')' in color definition

(thunderbird:7059): Gtk-WARNING **: 23:52:38.204: Theme parsing error: <data>:1:77: Expected ')' in color definition

Up to now, I'm out of ideas how to fix this. Does anyone else is having these issues? Where to file a bug for this? Mozilla? Canonical? I consider this a problem in Firefox, because Thunderbird is not affected. No other (bionic) application seems to be affected, too. I can't decide if this is a packaging problem or really a Firefox problem. Any help?

edit: Just for reference: My graphics card is a Gigabyte GeForceĀ® GTX 1060 G1 Gaming 6G.

Best Answer

Having the same problem, and can't find enough info about it online!

Strange "ghost images" / transparency effect in full-screen videos

For me, setting layers.acceleration.force-enabled to true in about:config fixed the issue, but I took a big hit in performance and FPS of my videos. There was visible stuttering.

In another answer in the Mozilla Support Forum, one other solution that was suggested and indeed fixed the issue was changing gfx.xrender.enabled to true, instead of forcing hardware acceleration.

I don't know which of the two is better.

Related Question