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.
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?
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.
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.
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).
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
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!
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.
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.
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.
