Background color displaying differently across browsers

Background color displaying differently across browsers
0
#1

I have been working on the Random Quote Generator.

I have a variety of background colors and I have noticed that they don’t display the same across different browsers. There are three screenshots taken from Chrome, Firefox and Safari respectively below. Firefox and Safari show the background color as a different shade. This doesn’t really bother me all that much.

What does concern me is how Chrome renders the background image. There are two differnt shades that appear and it looks quite unprofessional. I have been working mostly in Chrome and Safari and just noticed it now, which makes me think that it’s not related to my code.

Can anyone make sense of this? I poked around inspecting elements in Chrome and couldn’t determine what was happening.

All.png1441×2425 323 KB

#2

Wow! That’s a doozy of a bug? Can you post a link to the editor page of your CodePen so I can have a look-see at the code? Do you, by chance, work with an external monitor?

#3

This is a link to the editor view of my CodePen.

I usually work with an external monitor, but I noticed this when it was just me and my laptop. I just plugged into my external monitor and Chrome displays the background as one color when the browser window is on the monitor. It also displays correcly on my iPhone using both Safari and Chrome. It seems like only a Chrome window on my Laptop screen causes this problem.

#4

The reason I ask about the monitor is because when doing a quick search, I came across a bug that may be related to the way Chrome handles colors when there’s a change in the display’s color profile. If you haven’t already, I would try unplugging your monitor and restarting Chrome, then checking again without plugging the monitor back in.

So, goofy question, but I’m not a sports fan. What is the team we’re seeing in your example? I want to try to recreate that.

#5

I tried restarting chrome with the monitor unplugged. It produced the same result.

I used Philadelphia as my example but I have found this most noticeable with teams that have a red background (Calgary, Carolina and Chicago for example).

#6

Well, I’m very sorry but I can’t replicate this. It’s clearly an issue with Chrome, and even if we were to find out what the problem was, I doubt we would be able to do anything about it. What really gets me is the shape of the color difference in the Chrome example. If I could pinpoint exactly what is being rendered differently, then maybe it would be an issue with some other element’s opacity not being set to 0 (which may lighten the element underneath it). I was really hoping to inspect the elements to see what Chrome believes the colors should be.

With my last breath, I would suggest opening up your terminal and pasting in

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --enable-monitor-profile

which may force Chrome to use the correct color profile. If it helps, anyone else viewing your site is not at all likely to see the same bug.

Sorry I could help more!

#7

There’s no need to be sorry! You helped quite a bit and provided good suggestions that I’ve learned from. At the very least it’s encouraging that it is unlikely that someone else will see the same bug. Thanks!

#8

Isnt this what is meant by websafe colors?

They’re websafe bacause all browsers render them the same.

maybe this one falls out of that standard?

#9

Not really. That’s actually related to the colors that could be produced on a typical display in the early days of the web. There had to be a more-or-less standard palette, and any colors outside of that selection would be forced into it. No one needs to worry about web-safe colors anymore since displays can output 24-bit color. Besides, the issue isn’t so much that the color isn’t displaying correctly, but that Chrome is displaying two different colors where there should be one, and that I’m not seeing this despite also trying out Chrome on a Mac.

#10

Gotcha, websafe’s a relic.

I had a look at OP’s site too and it all loks ok on chrome here too.

Don’t suppoose its an old chrome version is it?

#11

Don’t suppoose its an old chrome version is it?

I don’t think so. I am running:

on a MacBook Air running Sierra. (10.12)

#13

That’s encouraging. I had actually stopped working on this project a few days ago and I only noticed it when I tab that I still had open (likely from my external monitor originally) showed up oddly on my MBA. It’s good to know that the code is likely fine and I can move on to the next challenge.

#14

Not that it’s any help, but I’m having the same issue here too. Macbook Pro running 10.12 Sierra and connected to an external monitor using Chrome 53.

I’m wondering if it’s a Sierra issue?

Here’s an example - here’s a background only set to solid red:

Screen Shot 2016-09-27 at 13.04.49.png1287×848 10.7 KB

#15

Are there any other elements in the markup, or is that just a blank HTML page?

#16

There are other elements on the page yes, when removed, the issue goes away too.

I found this, if it’s any help to anyone here: https://bugs.chromium.org/p/chromium/issues/detail?id=633805

#17

Yup, looks like pasting

chrome://flags/#enable-gpu-rasterization

into the address bar could fix the issue. Nice find @adamlunn!

#18

Thanks!

Yeah I thought that would work, but after trying each option, I still have the same issue :frowning:

#19

I downloaded Canary from here and the issue is gone completely.

So I guess we’re just waiting for a Chrome update to fix this issue :grinning:

#20

Looks like Canary may have Force-GPU flag on by default. A fix is in the works but this is def a bug. Hopefully Chrome will have the fix in the next update.