I am out of ideas what is happening here in Chrome (109 on win 10), hope someone could help me understand...
Lets say I have a simple .html:
<!DOCTYPE html>
<html style="background:#ff0000">
</html>
Running it in browser and measuring the rendered color with built-in color picker (or any photoshop-like software) I am getting #ff1806 instead of #ff0000. Same case with Edge. However, Firefox renders pure red as expected.
Is this a chrome bug to report, or chrome/system custom color scheme settings that's applied somewhere?
This is related to Chrome Force color profile flag and (likely) my BenQ monitor. More interesting reading on BenQ knowledge center.
The issue can be fixed by changing #force-color-profile flag to "sRGB" (changed from Default)
Related
Problem
A specific font (Concert One from Google Fonts) behaves badly in Firefox only. When underlined, the underline appears as a strikethrough due to being too high.
Example
Here's my minimal, reproducible example:
<!DOCTYPE html>
<html lang="en-us">
<head>
<link href="https://fonts.googleapis.com/css?family=Concert+One&display=swap" rel="stylesheet">
</head>
<body>
<u style="font-family: 'Concert One'">Underline too high</u>
</body>
</html>
Here's the appearance in Safari (same as in Chrome), which is the intended appearance:
And this is how it appears in Firefox:
Both screenshots were taken in macOS version 10.15 (19A583). Firefox version is 69.0.2 (64-bit).
Questions
What's the cause? In my view it could be any of the following, possibly more than one:
problem in my example
misconfigured/"wrong" font file
bug in Firefox
If the problem is not in my example, I would like to report this behavior to the appropriate party. I don't know much about fonts or browser rendering, so it's hard for me to determine what's going on here.
If the fault is not in my example, is there a workaround that allows me to continue using this specific font and have it display properly in Firefox?
As of Firefox 70, the issue is fixed, maybe due to compositor improvements on macOS, or maybe because "Readability is now greatly improved on under- or overlined texts, including links. The lines will now be interrupted instead of crossing over a glyph."
Thanks Mr Lister for noticing that this would be fixed in future Firefox versions.
First question in the community and excited to have found a place with so much knowledge!
My website, http://www.localcookingclasses.com, displays slightly differently on Firefox vs Chrome and IE. The gray background shows on Firefox, while Chrome and IE display the entire site in white.
What could trigger this? I think it might be a missing closed but I haven't found it.
Is there a particular file or line of code I can share with you, or can enough info be pulled from the URL I provided? I want to make sure I include enough information.
Attaching screenshot of Firefox which shows the gray background.
Firefox
Just opened them on Firefox and Chrome and they look exactly the same to me.
Maybe refresh the cache?
Also there are some css atributes that are specific of chrome and firefox, if you could share the background snipet of the css I could be able to help.
EDIT: Screenshots of what I see (requested by user)
Chrome-----Firefox
Below is a screenshot of the same hex code. Right is Canary and left is the stable version of Chrome. Canary uses a wrong color profile (I think), the bright version is the "wrong" one. Does anybody know how I can figure out where the problem is and how I can solve it?
I know colors will always look different on different monitors, but it's strange it's happening on my laptop screen with two different browsers. Also, there are things that can trigger the stable version into working with the wrong color profile. For example:
Embedding an iframe
-webkit-backface-visibility: hidden;
I've found out that these two cause Chrome stable into changing the colors (I presume it's because it uses a different color profile). The result is a see a quick change of all my colors on page load. I've tested it with backface-visibility, inspect the element and tick that css property on/off and I definitely see a change of the colors.
Here is the difference:
I'm using a MacBook Pro
OSX 10.8.2.
Encountered with this problem today
Go to chrome://flags/
Search for 'color' and switch Force color profile flag to different. In my case - sRGB
I am developing a website in XHTML 1.1/CSS 3.0 and I have a problem with Internet Explorer 9. Each time I change pages from "Home" to "Features" various images flash 'white' before filling in. This 'white flash' occurs each time the page is changed. I have seen numerous stack overflow posts discussing such errors but they seem to be for older versions of IE. The site looks fine in Chrome.
Here is what I've tried so far --
ran XHTML through validator (it passes).
ran CSS Level 3 validator (it passes).
tried setting background color to black.
tried changing CSS include format to import and back again (per previous stack overflow suggestion)
moved from HTML/XHTML Transitional to XHTML Strict
commented out images to identify a specific image or div -- seems that most of them do it.
tried empty Script tag hack (for flash of uninitialized content bug in IE)
tried adding meta tags to change cache settings so browser uses cache.
tried various IE browser-specific meta tags suggested for IE6, IE7, IE8 to try to 'fix' the behavior.
Any thoughts on what I can try next?
Thank you!
The flashing could be a side effect of having multiple layers of background images, including the shadow layer which stretches to fill the viewport. I'd try disabling those effects and seeing if that helps. Who knows how that might be affecting IE drawing the page...
You might find that putting gradient.png on #innerContent instead of #content makes more sense, and in doing that, you you won't need to use multiple BG images on a single element.
Oi!
I have a question regarding the differences in how images are being rendered inside of Firefox then in Internet Explorer. Firefox version is 3.5.19 and Internet Explorer version is MSIE 7.0.
Firefox http://www.wmclan.net/i/images/15877834356924635314.png
Internet Explorer http://www.wmclan.net/i/images/95502460007153569229.png
I was thinking a possible solution from Firefox 3.5 color correction hack? but is there a better way of doing that instead of running every single image through that process? How do I make it so that the images have the same background color as the background... I selected the color from the background with photoshop's color picker and used the same color code for each the image and the background image. This works fine with IE and also Chrome.. have not tested on other browsers.
This has to do with the gamma data that is added to the images. I thinks this is only a mac issue. The image is altered based on the gamma data, and doesn't match the css color values.
The solution you found is the only way to disable this "feature".
If you don't like the command line there is also easy drag and drop tool called PngThing.app for mac. I'm not using windows, so you'll have to google for that.