Update: 15 Feb 2021
It seems that the Chrome team has reverted this change, or at least on my end I don't see the white glow anymore. This is on chrome version 88.0.4324.96 though everything else about my setup is the same. I can't say with any certainty whether this was changed in this version or in a previous major version since I made the original question, though, but perhaps updating to 88 will fix it for others, too.
Here's what SO looks like to me now
And my own website
As you can see, no white glow anymore!
Original Post
On Ubuntu 20.04.01 LTS, running Google Chrome 85.0.4183.83, when using the devtools "Device Toolbar" option, I get this horrible white box-shadow around the responsive window. I thought it was my own website and that I somehow set a box-shadow to the html element or something, but testing it on a variety of different websites, the box shadow shows up
It's a lot less obvious when the website doesn't have a dark background, but as you can see from the screenshot of my own website it's very obvious on sites with dark backgrounds, as you can see with Stackoverflow below
It's not immediately apparent on Google's homepage, however if you look hard enough you'll definitely notice a white glow around the responsive window.
What could be causing this? It happens even with no extensions active, with a fresh boot of Chrome/Ubuntu, the only thing I haven't tried yet is reinstalling Chrome, but that seems an excessive measure. There either wasn't this white glow in the past, or I just didn't notice it before now (which I doubt).
Related
I have some very weird issue with firefox while rendering background-images. I'm not sure if it's a firefox bug or simply my fault.
Every time I open my project site in firefox all background images are loaded and displayed correctly. After I switch to another tab and switch back after a while all background images disappeared. I checked the network analysis tab in the developer tools and all files are loaded correctly. Also in some situations parts of the images appear after I select some text over it. After parts of a second all the images show up. So I assume it's a rendering bug in firefox.
My images are implemented like:
background-image:url("path/to/image.png");
background-size:cover;
background-position:center center;
Is there a workaround for that bug? Is that even a bug? Can anyone confirm that? I searched the web and I couldn't find anything...
I came across this bug after a long day of experimenting with CSS background images and radial gradients for a site of mine before I eventually realised this was a bug in Firefox and not my CSS. The bug is now confirmed to have been fixed in Firefox 76, which is scheduled for release to the Stable channel on May 6. To get hold of Firefox 76 before May 6, go here to download the 76 Beta and switch to the Beta channel. Just don't forget to switch back to the Stable channel when Firefox 76 is eventually released on May 6.
I recently updated to Safari 7.0.2 (comes along with Maverick) and noticed a significant change on colors on my webpage. Namely the grey tones are darker and the css generated gradients show ugly steps, no longer fluid. Colors with Chrome under Maverick are still the same, no longer comparable to Safari. So I have to define different CSS colors to have the same results on Chrome and Safari? Weird. Never had this problem of different colors not even among other browsers (Firefox and so on, all the same)
www.stefanseifert.com
Maybe I’d have to add that I am using a custom monitor color profile.
Edit:
Thanks Unmut for your quick answer and your interest! What you showed me is interesting, in fact I didn’t know about this. Leaned something. Unfortunately, yet, this is not the case here. First because it isn’t about the colors within images but about the ones defined by css. (which is very very bad in my eyes)
I will try to attach 3 pics to explain. Second, yes, the difference is not big but it is significant enough for me as a designer. On the bigger pic you see 3 screenshots. The grey color as I defined it in css should be #787878. All browsers display it correctly (as also Safari did before Maverick!) Safaris grey now is deeper.
color_difference http://www.stefanseifert.com/Color_difference.png.
And what’s even worse are the gradients created in css (plus transparency) that show very well on all browsers (as in the first pic), but with slightly visible scales in Safari (also NOT so with Safari before Maverick) as in the last pic.
gradient_1 http://www.stefanseifert.com/gradient_Chrome_andOthers.png.
gradient_2 http://www.stefanseifert.com/gradient_Safari_7.0.2.png.
I retain this a serious problem. All around I read about Mavericks improvement of color, for me this is a great disadvantage for it doesn’t give reliable # css colors. Someone with help?
I figured one problem out, at least. I work with a customized own color profile on my iMac. And it seems that this creates the confusion. If I turn to the standard iMac profile all browsers look the same and the screenshots give the right hex color values. Yet, this is what I don’t want to do. So no real solution here for me. Somewhere I read that it depends on srgb that are not used by Safari 7, don’t know if this is true but it maybe a useful hint for someone.
For what regards the less fluid css gradients, another problem that remains. New Safari is bad at this! Much more preferable Google Chrome now, but the sad thing is that one can’t force users to use Chrome instead of Safari. All standard Mac users will use Safari I am afraid.
Second I observed performance problems in Safari with complex css transitions. It helped a little force elements around to hardware acceleration or introduce back face visibility hidden all over the place, but this is not very satisfying and good part of the lousy performance remains even with it. I thought Apple wanted to better performance of its browser, but for me it seems worse now. Everything was just fine with Safari 6 and css transitions instead. A petty.
I think it has got a problem about Color Rendering & Color Profiles.
Why don't you check these links:
http://css-tricks.com/color-rendering-difference-firefox-vs-safari/
http://www.color.org/version4html.xalter
http://news.cnet.com/Safari-ushers-in-better-browser-colors/2100-1012_3-6191815.html
Note: I checked it Mac OSX Mountain Lion, Safari 6.03 and i didn't see big difference.
I found this:
Apple Safari Safari supports both v2 and v4 ICC profiles.
Unfortunately, it has no control over color on other page elements.
Tagged images look right, but every other page element has
over-saturated colors on a wide gamut LCD.
on
http://cameratico.com/guides/web-browser-color-management-guide/
Seems that Safari forces the webpage to use the full range of Monitor LCD while others like Chrome don’t. So if you changed your monitor color profile it is ignored by Safari or at least differently managed.
If you could influence on the way Safari interprets images color by tagging the images this is not possible with the rest of the elements as divs defined by CSS values.
This is an issue I noticed in an application that is using icon fonts through all fonts are having issues. Basically the issue is that when I leave the application in a background tab for awhile, sometimes when I come back the fonts get reset to something (most but not all icon fonts show up as squares) and when I move my mouse over the screen, the fonts are switched back to what they should be.
I have made a video to show the issue:
https://vimeo.com/86414508
Any help with this would be greatly appreciated.
It seems to be a known issue in Chrome as it's been answered here :
Icon-font sporadically shows up as squares and back to icon on hover
It's a little annoying but I guess it won't be too much of a problem since they come back when you hover the page again and I'm sure it'll be fixed in the next versions of Chrome.
I have a UI where the navigation is over a blurred set of images (blurred using webkit blur), and whenever the navigation moves, theres this strange almost ghosting effect that happens. After you click away onto another element, the ghosting also goes away.
Any advice on how to solve this?
On Mac Snow Leopard:
Chrome 19.0.1084.56
Safari all of them, including 6 beta
It seems that you are encountering a browser/engine dependent issue.
Chances are : you can't solve it by yourself aside from not using blur, or the like.
Not that this bug might not impact all users, depending on the version of the webkit they are using.
Hopefully the problem will be corrected in a future version. Maybe try to contact webkit guys, but that's really all you can do (aside submitting a patch).
When checking my website a couple of days ago, everything was OK, but having looked at it this morning in Chrome, the background image and colour applied to the body have just disappeared completely. Safari is also looking pretty bad with the background colour visible and the background image on the body only visible behind other background images!
Things I've tried...
resizing the background image so that it's a lot smaller
removing the image and just having a background colour
viewing the site in incognito mode
Absolutely no difference in the outcome. I've cleared the cache and tried disabling caching but to no avail. Also, the file definitely exists. Not only can I see them being downloaded in the 'Network' tab in the Chrome developer tools, you can see it here: http://charanj.it/assets/images/website-bg.jpg
You can also see the smaller version I tried http://charanj.it/assets/images/website-bg-small.jpg
Weirdly, resizing the browser window in Safari brings the background image in. Another odd thing is that another site I built using almost exactly the same background techniques shows the images just fine, see http://nikeplusphp.org
The CSS has been generated using LESSPHP but I'm sure this isn't the issue as it was working fine before and no changes have been made to the CSS in months.
I have Chrome v19.0.1084.46 m and Safari 5.1.2, Windows 7 but the issue also occurred on my MacBook with the Chrome 19.
Tiny bit more information: Issue happens in a locally run copy of the website too.
Although it seems to be a browser issue, the culprit was the following line of CSS at the top of the stylesheet:
* {
-webkit-backface-visibility: hidden;
}
I tried moving it elsewhere but I still get the same issue. Applying to individual elements seems to work, but as I no longer use any 3D transitions on the site, there's no need for it and removing it has solved the problem.
In my chrome(20.0.1132.11 dev-m) everything is ok.
The problem may be in the extensions (try to disable all) or the most chrome (try to reinstall it)
Update: Same bug on SO and in accordance with the answers to that question, this bug is known and not yet fixed
I checked your website, and the background works, try to clear all navigation data (ctrl+shift+delete select all check-boxes and any time of).