Is there a way to force Firefox to use color management on a website via CSS or any other means?
Most browsers use color management to render images and CSS in sRGB by default. With Firefox, you need to manually enable color management. I build websites, and colors are vastly different on Firefox. I'd like a consistent, predictable rendering such that Firefox renders the same as all other browsers without requiring the user to change their about:config.
More info on this website
Relevant excerpt:
Firefox 67.0.0 at least, it doesn’t color manage CSS colors. It just renders CSS colors in the monitor’s color profile. This results in CSS colors blowing out into over-saturated reds and greens when viewed on wide-gamut monitors. Firefox does support full web color management, including rendering CSS colors in sRGB and honoring ICC v4 color profiles, but it must be manually enabled using the following steps.
I can't for the life of me figure out why the same font that I build using gulp-iconfont renders so wildly different on Windows vs. basically all other OSes, including mobile OSes. I've tested practically all of them through Browserstack, and consistently all browser running on Windows render the font with a massive amount of space above/below each icon while all other platforms render as expected.
I highlighted the elements using the inspector for the following screenshots:
Windows:
macOS:
I think I have narrowed it down to be the font rendering, as when I change the font-family in the css, the spacing around the characters evaporates. I have messed around with the gulp-iconfont options (fontHeight is set to 1024 and font is being normalized) without success.
Is my only option to let go of compiling my own iconfont and just using svg's, or does anyone know what I might be doing wrong? I feel the stench of defeat upon me so any faint scent of hope would make me simmer with joy.
This website: http://pamplonaenglishteacher.com
Source code here: https://github.com/Yorkshireman/pamplona_english_teacher2
The background is a subtle gradient.
I am using an autoprefixer, so no problem with vendor prefixes.
Background colour looks fine on my laptop, several friend's mobiles, mac, and ipad.
However, on my Nokia windows phone (internet explorer), the background is a bright garish red, and I don't think there is any gradient.
Why?
And how do I fix it?
It's got me stumped.
It looks like you are using color values for your start and end gradient that are very similar shades of red. Even minor monitor/device/browser setting differences are going to possibly interpret those differently enough to be a wash. When I load it in Chrome on a macbook, it's a wash of red, but I can see the gradient barely on my iPad but changing the second values saturation or lightness has the gradient showing up.
I don't see a CSS properties or naming issue that I know of, just color choices, if that helps.
I'm trying to turn my icons into font glyphs.
Now, the problem is antialiasing of the font in Google Chrome on Windows 7 (it looks good on OS X). I took two shots, where on the first one you can see the desired behaviour, as seen on Firefox/Windows 7 and all the other browsers, except Google Chrome, which is the second shot. Is that problem in font itself? Or is it because of system settings? Is it in CSS settings?
Firefox 12 Windows 7
Google Chrome 18 Windows 7
The most problematic parts are highlighted with red.
Use CUFON instead of #font-face it's a better option as per the rendering font in windows because CUFON put the font in canvas & it's look smooth in windows.
Using text-shadow helps a little, try adding a little bit of shadow with 4-6 pixels of blur. Play around with it and you may find the "sweet spot." Some font sizes also seem to be more problematic than others, try taking it up or down a pixel or two and see if that helps. I'm tilting at this particular windmill with Google right now and hoping I can get someone's attention. In this image, the top example is IE9, the bottom example is Google Chrome (both Windows 7). https://twitter.com/#!/tacomamama/status/197397136470589440/photo/1
Chrome renders #FF3A00 as #FF0000 for some reason. I included a screenshot from jsfiddle to illustrate the point. The colour that the Color Meter reports (and what I see) differs from what CSS says.
This happens to other colours too. For example, #FFAF00 is rendered as #FFA400 according to the Color Meter.
However, the colours are rendered without problems on Safari and Firefox. I'm on a Mac using Chrome 11, Safari 5 and Firefox 5.
I'm sure there's a logical explanation. Any ideas?
Update: I'm attaching a screenshot of Chrome next to Safari showing the very same page. I checked this image in Photoshop: the colours are #F00 in Chrome and #FF3A00 in Safari.
Ok, as it turned out, I needed to restart my Chrome. I often connect my macbook air to a 24 inch monitor. It looks like Chrome displays the colours incorrectly when I change to a monitor that's different from what was used when Chrome was started.
I found the answer on the Google Help forum : "I should mention that in OS X, every time you change your monitor or monitor profile (e.g. if you switch from your laptop display to your external display), you MUST restart Chrome for it to get the proper monitor profile information from the OS."
By default both Firefox and Safari use the sRGB color profile. You must do the same, if your Google Chrome takes a different color profile as default.
Access at Chrome: chrome://flags/#force-color-profile
Change Force color profile to "sRGB".
Relaunch your browser and testify the rendered colors now.
I recently posted a similar question: https://stackoverflow.com/questions/6338077/google-chrome-for-mac-css-colors-and-display-profiles
As Andrew Marshall answered there, this is a known issue: http://code.google.com/p/chromium/issues/detail?id=44872
Mac has color correction set up for your monitor. Your browser may or may not use color correction for web content/images depending on its setup. Your color picker reports what your OS thinks it is rendering. Your browser may report something else.
Color on computers. Something many of us take for granted but never bothered to understand how it is rendered.
Chrome color picker works by taking color from current monitor color profile,and the problem may happens by changing color setting or sometime change monitor, please check the below method to solve.
Go to chrome://flags/#force-color-profile and click Reset all to default
Thanks.
In case someone else come here because firefox images looks too colorful (over saturated).
Full guide on how to fix it https://cameratico.com/color-management/firefox/
Shortly:
Type in about:config on your Firefox address bar
Set gfx.color_management.mode to 1
Set gfx.color_management.enablev4 to true
Restart firefox
Now Firefox will display colors same as Safari, Chrome and all other browsers
I changed the Colour Profile in OS X and that sorted it for me.
See the screenshots below using different Color Profile. Note, in the screenshots I'm trying to differentiate between #ff00ff, #ff1aff, #ff33ff and #ff4dff. It's only when I don't choose the default OS X colour profile that I can differentiate the colours correctly.
Default colour profile:
With a different colour profile:
From: CSS colors on OS X displaying correctly in Firefox but incorrectly in Safari and Chrome (potentially 'solved')
I found Safari and Chrome could not differentiate between #ff00ff, #ff1aff, #ff33ff and #ff4dff. But Firefox could. In addition Inkscape, an X11 app, could. But Gimp and Libreoffice Writer, non X11 apps, could not. Firefox and X11 apps seem to be using their own colour profile somehow.
I have no idea why Mac defaults to Color LCD profile which does not do this differentiation amongst others.
Had this problem with Chrome (Lubuntu) when exporting a PNG in Photoshop. Solution: File -> Save As -> Uncheck "ICC Profile: Adobe RGB (1998)".