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.

Sign up for GitHub

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

Jump to bottom

Window: backgroundColor does not match CSS color #9671

Closed
bpasero opened this issue Jun 5, 2017 · 12 comments
Closed

Window: backgroundColor does not match CSS color #9671

bpasero opened this issue Jun 5, 2017 · 12 comments
Labels
2-0-x bug 🪲 platform/macOS

Comments

@bpasero
Copy link
Contributor

bpasero commented Jun 5, 2017

  • Electron version: 1.7.x
  • Operating system: macOS 10.12.5

Expected behavior

Setting a window backgroundColor should produce the same visual result as setting it via CSS.

Actual behavior

There is a slight flicker from where the background color from CSS kicks in.

How to reproduce

  • create a window with background color: new BrowserWindow({ width: 800, height: 600, backgroundColor: '#DDDDDD' })
  • in that window set the same background color via CSS: <body style="background-color: #DDDDDD;">
  • loadURL of the window with a slight timeout to see the difference
setTimeout(function () {
    win.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }))
}, 2000);

The following video shows the difference clearly:

panel-red

Could it be that the window backgroundColor somehow uses a different color space compared to the renderer one via CSS?
@bpasero bpasero changed the title Window: backgroundColor does not match Window: backgroundColor does not match CSS color Jun 5, 2017
@javan
Copy link
Contributor

javan commented Jun 5, 2017

Does showing the window after ready-to-show help? See https://github.com/electron/electron/blob/master/docs/api/browser-window.md#showing-window-gracefully

@bpasero
Copy link
Contributor Author

bpasero commented Jun 5, 2017

@javan hard to say because when using that event, the timeout is no longer showing the window early before loading the URL.

Our interest is to show a window as fast as possible so we would not want to use this event. It seems showing the window early works, except for this color inconsistency.

@hph
Copy link

hph commented Jun 22, 2017

This bug has also been affecting me for some time. It's trivial to reproduce by creating a window with a backgroundColor option and an HTML template with the same background color value in the body (let me know if you need more). I'm using rgb(0, 43, 54) and it is rendered as rgb(0, 57, 69) (value found using the Mac digital color meter). Any idea what might be causing this?

@bpasero
Copy link
Contributor Author

bpasero commented Jun 25, 2017

One thing I was wondering is if the colors we provide in backgroundColor are maybe converted to another color system which is not RGB and as such there is a slight color change compared to what was entered?

@ghost
Copy link

ghost commented Aug 25, 2017 •
edited by ghost

I'm also encountering this issue.

The BrowserWindow's backgroundColor is set to #252526 but actually appears as #313132.

After some trial and error, I managed to match the color set in backgroundColor with that off the one via CSS by setting it to a lower value. (e.g. to match #252526 the BrowserWindow's backgroundColor is set to #1c1c1d).

@teleclimber
Copy link
Contributor

I don't use backgroundColor but I have noticed that regular CSS colors are not rendered correctly on Mac: #10732. This may account for the visual difference between backgroundColor and the CSS color.

@ianpaschal
Copy link

ianpaschal commented Nov 6, 2017 •
edited

Also experiencing this issue with electron v1.4.3.

Interestingly, in an attempt to avoid this issue, I made my page background color transparent so that the background color of the window would be used. I tested with #FF0000 and it worked. Yay! Switched back to the dark grey I was using and... no. When resizing the window the new background color was lighter than the existing background color.

So it seems this is entirely an issue with the BrowserWindow.

Also, I noticed that the custom theme for the Mac Terminal app that I made also doesn't display the background shade of grey correctly.

Also also, I just did a test on one of the windows, it's not being converted to websafe for anyone who suspected that.

My input #212529 is somehow being rendered as #202428 in the page body and #2b2e37 in "new areas" when the window is resized.

@sindresorhus
Copy link
Contributor

I'm still seeing this with Electron 2.0

@sindresorhus sindresorhus mentioned this issue May 12, 2018
Merged
@nehbit
Copy link

nehbit commented Jun 27, 2018 •
edited

I've encountered this issue today as well, I thought I was hallucinating for a good amount of time, but it appears it's genuinely different.


Nope, that's not correct, close but not exact. The skew is not linear, it seems to change based on your base colour. 

Edit: Turns out, the colours after load don't match as well. 

The workaround I've found is to: 

1) take a screenshot of the screen after load (colour 1), 
2) take a screenshot of the screen at load (colour 2), 
3) look at the delta in the Lab colour space between 1 and 2, 
4) add that delta to the colour you originally provided (colour 3, which manifests in electron as 1) 

to end up with a colour 4, which when given to electron, will make 1 match 2.

@sindresorhus sindresorhus mentioned this issue Jul 20, 2018
Closed
@macsj200
Copy link

@gtinkham Weren't you having this issue?

@pronebird
Copy link

Perhaps Electron has to use deviceRGB instead of some generic color profile?

@codebytere
Copy link
Member

This should be fixed on latest versions of Electron.

CvX referenced this issue in sindresorhus/caprine Jun 6, 2019
@sindresorhus
Remove moot Electron workaround
b9c461e
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
2-0-x bug 🪲 platform/macOS
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests