css color rendering different in safari
Sorry, but there’s really nothing you can do about it.
- Each browser has its own rendering engine, and they render colors differently.
- Users rarely visit a website in more than one browser, and as a result will probably not notice.
- As I said, there’s nothing you can do to change it. Just pick a color that looks fine in the different browsers and continue. I wish I could offer you a better answer but that’s really all there is to it!
Chrome renders colours differently from Safari and Firefox
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
CSS color difference between Browsers
Restarting Chrome:
Chrome can displays the colours incorrectly when you change to a monitor that's different from what was used when Chrome was started.
Its an color profile issue
Chrome :
Also maybe try force color profile to sRGB
in chrome://flags
Firefox :
You can also change the behavior of Firefox by going to the url: about:config, in Firefox ,then find gfx.color_management.mode setting and changing it to 1
or 0
as the default is 2
.
Safari :
Safari has access to your monitor's ICC profile that it will use it to provide the best correspondence in sRGB.
There is no setting in Safari to make it behave like others.
EXTRA:
'On mac, you can check it with the DigitalColor Meter utility you've got in you Apps > Utilities. Set it to Display in sRGB to see the colors measured. Safari will always display the correct sRGB color, while Chrome and Firefox will be off with an non standard sRGB color profile.
If you set your monitor's color profile to an standard sRGB one, then all browsers will show the correct values.' @Kaiido
::selection background-color and color rendering in browsers
According to quirksmode.org, -webkit-selection
and -moz-selection
are indeed available. I just tested it with Chrome (18) and Firefox (13) and can confirm that it works with Firefox, but I didn't have success with -webkit-selection
on Chrome (it ignored it), and according to this SO question it doesn't exist (and the answer says that ::selection
should also work on all browser, but doesn't for me, too).
As already metioned in this answer, Chrome forces the selection to be transparent, but you can work around this using
background:rgba(255, 255, 255, 0.99);
For more details, checkout the linked answer by tw16
Furthermore, this works for me on FF:
::selection { /* stuff */ }
::-moz-selection { /* stuff */}
But this does not:
::selection, ::-moz-selection { /* stuff */ }
But maybe this is not related to ::selection
but does apply on all pseudo elements, couldn't find an answer to that.
Hex colors display differently between Chrome and Safari on Mac
This is because Safari has access to your monitor's ICC profile, and that it will use it to provide the best correspondence in sRGB.
On mac, you can check it with the DigitalColor Meter utility you've got in you Apps > Utilities. Set it to Display in sRGB to see the colors measured. Safari will always display the correct sRGB color, while Chrome and Firefox will be off with an non standard sRGB color profile.
If you set your monitor's color profile to an standard sRGB one, then all browsers will show the correct values.
There is no setting in Safari to make it behave like others, and I didn't found a way in chrome either ; Firefox has some flags about color management, but I think it's only about images' embedded ICC profiles, not the monitor's one.
[edit],
Actually FF's flags gfx.color_management.XXXX
do also apply to the rendered colors, and will provide the same behavior as Safari. But, it seems there are bugs when setting it (e.g canvas' getImageData()
method will return the displayed sRGB values instead of the RGB ones that has been authored).
Related Topics
How to Use CSS Rotate() in Th Table Tags
How Are The Widths of Nested Absolutely Positioned Elements Determined
Difference Between Overflow:Hidden and Display:None
Why Does Ie10 Require The Presence of a P:Hover {} Rule for Transitions to Work on a Pseudo Element
Google Chrome: Diagonal CSS Line-Through
How to Use Calc() Inside Another Function
Import Font into React Application
What Is The Use of @Namespace in CSS
Overflow Property Returning Auto Value
Borderradius Style Property Not Rounding The Edges in Reactjs
Sass 3.2 Media Queries and Internet Explorer Support
Applying CSS Rules Based on Input Checkbox Status
Angular [Class.Active]="Isactive" - What Does "Class.Active" Mean Here
Probleme CSS3 Scale Transform and Overflow:Hidden on Safari
Fieldset Contents Overflow in Firefox
In CSS Use "Display:None" on The Element, But Keep Its ":After"