Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

backgroundColor not working in html for Chrome #525

Open
LivC193 opened this issue Apr 21, 2018 · 20 comments
Open

backgroundColor not working in html for Chrome #525

LivC193 opened this issue Apr 21, 2018 · 20 comments

Comments

@LivC193
Copy link

LivC193 commented Apr 21, 2018

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

@LivC193 LivC193 changed the title backgroundColor not working in html backgroundColor not working in html for html Apr 21, 2018
@LivC193 LivC193 changed the title backgroundColor not working in html for html backgroundColor not working in html for Chrome Apr 21, 2018
@gbayarri
Copy link

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
Copy link
Author

LivC193 commented Apr 24, 2018

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

@gbayarri
Copy link

gbayarri commented May 3, 2018

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

@arose
Copy link
Collaborator

arose commented Jun 13, 2018

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

screen shot 2018-06-13 at 2 05 49 pm

@gbayarri
Copy link

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
Copy link
Collaborator

arose commented Jun 13, 2018

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

@gbayarri
Copy link

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

@arose
Copy link
Collaborator

arose commented Jun 13, 2018

Or maybe update gpu drivers

@DAlvGar
Copy link

DAlvGar commented Aug 21, 2018

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

@david-bouyssie
Copy link

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
Copy link

gbayarri commented Sep 27, 2018

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
Copy link

@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
Copy link

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

screenshot

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
Copy link

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

@arose
Copy link
Collaborator

arose commented Jan 7, 2019

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

@gbayarri
Copy link

gbayarri commented Jan 8, 2019

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
Copy link

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

@krassowski
Copy link

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
Copy link
Collaborator

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
Copy link

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 nglviewer/nglview#948 (comment).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants