backgroundColor not working in html for Chrome

[LivC193]

Hi I don't know if I am doing anything wrong but I am trying to change the backgroundColor of the stage like this: var stage = new NGL.Stage( "viewport", {backgroundColor:'grey'} );

it works in codepen and Mozilla and Opera but not when I open the website with Chrome. For all I use this CDN: https://cdn.rawgit.com/arose/ngl/v2.0.0-dev.31/dist/ngl.js

[gbayarri]

Are you running Chrome over Ubuntu? I have the same issue, but not just this one. The trajectories don't work properly, nor some representations like surfaces. As I said, it just happens in Chrome (and Chromium) over Ubuntu (14.04 in my case). Some of my co-workers have similar issues with NGL View.

Before that, it happened after every Chrome update, but I fixed it just resetting WebGL through chrome://flags. But after updating to the version 64 or 65, this option disappeared, so I tried with a plugin, but this trick doesn't fix the bug anymore.

It seems more a problem with WebGL / Ubuntu compatibility.

[LivC193]

Yes I use the same Ubuntu config.
Thanks for your answer.

[gbayarri]

Anybody knows how to fix that? Some google chrome trick?

[arose]

Works for me in current Chrome (67), see screenshot. Is it still a problem for you?

[gbayarri]

Are you running Chrome on Ubuntu? In my case: Chrome 67, Ubuntu 14.04 and the background is always black. Chrome on mac works properly (as Safari). Firefox works perfect in both OS.

[arose]

I tested on a Mac. My first idea about linux is that is is a graphics driver issue.

[gbayarri]

Thanks Alexander. So there is nothing to do but wait for a fix from Chrome?

[arose]

Or maybe update gpu drivers

[DAlvGar]

Hi, I have the same issue: Chrome 68, Windows 10. Background stays black even if i change the color.

[david-bouyssie]

Is this related to this? https://stackoverflow.com/questions/16177056/changing-three-js-background-to-transparent-or-other-color

When I execute the following code, the color of the background is changing but I'm loosing transparency:

nglStage.viewer.renderer.setClearColor( 0xffffff, 1);
nglStage.viewer.requestRender();

If I change the second parameter of the setClearColor method from 1 to 0, the behavior is similar to the one observed while using:

nglStage.setParameters({backgroundColor: "white"});

However changing ThreeJS scene background works well: nglStage.viewer.scene.background = new THREE.Color( 0xffffff );

But it required me to add the ThreeJS dependency to my project. I think it could be avoided if it was done from NGL directly.

Thanks

[gbayarri]

Hi David,

The code below fix the background color issue but in my case (Chrome on Ubuntu), the 3D representation disappears when I interact with it.

nglStage.viewer.renderer.setClearColor( 0xffffff, 1); nglStage.viewer.requestRender();

By the way, I have experiencied the same issue in Safari mobile.

[david-bouyssie]

@gbayarri: it's because the second parameter of setClearColor controls transparency. So when setting to 1 we loose transparency and thus it makes the representation disappears.

Have you tried the second workaround? nglStage.viewer.scene.background = new THREE.Color( 0xffffff );

[gbayarri]

@david-bouyssie: yes, with TREE is working, thanks!

But just with static representations. When I try to represent a trajectory the background changes, but the molecules remain at the first position while the bonds move properly.

I thought this issue was related with the background one because it only happens in the same cases I can't change the background (in my case chrome on ubuntu and safari mobile). Is it related?

[david-bouyssie]

@gbayarri: I'm afraid I can't help more than that because I'm not an NGL developer. Sorry ;-)

[arose]

does nglStage.viewer.renderer.setClearColor( 0xffffff, 0.01); work?

[gbayarri]

Yes, it changes the background, but the problem with the trajectories persists.

Anyway, I have updated from Ubuntu 14 to Ubuntu 18 and with 18 it works perfect. I don't know what happens with Ubuntu 16, but as you said it seems a problem with the drivers on some (old) OS.

[krassowski]

I'm affected by this problem on Ubuntu 21.04 with Chrome 93 using XOrg display server.

[krassowski]

After an upgrade and restart it seems to work fine for me now on Chrome 94 when using "System title bars and borders" (not sure if this is related).

[fredludlow]

Thanks for the data points @krassowski. If there's a solid way to reproduce we could dig a bit more, but if it's a transient thing it's pretty hard to know where to start!

[krassowski]

No worries, I was just trying to leave trace in case someone gets bitten again in future to help to triangulate the issue. There is more discussion in https://github.com/nglviewer/nglview/issues/948#issuecomment-929312548.