I am trying to pick colours for my web app but realizing a huge difference in the way safari renders the stylesheet when compared with firefox or chrome. The red colour in the screenshot is supposed to be #ff3366, however it seems safari chooses to render #ff0036.
I am not sure why I can't find any information on this problem, am I crazy?
I am running 10.9.1 Mavericks
thanks!
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!
Related
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.
So, i am making a small portfolio site (http://www.cip.ifi.lmu.de/~fritschd/testDebo/),
where i have a BIG box with a BIG font. On mac, everything is fine, on windows however, depending on the browser it can really suck.
Firefox on windows is one of those.
Is there a way to smooth this big font? What other options do i have? (I don't want to use an image for SEO reasons). Other (system) fonts have the same issue btw.
EDIT:
The example can be found at the linked page. The font has a size of ca. 180px, so it's pretty big.
The browser that seems to have problem is the latest build of firefox on windows. If you look at the div with the name in the page, the borders are pixelated. I read that it is an issue with windows true font option and browsers that don't have own settings (i.e. chrome) regarding that. So what are my options at this point?
It's a very well-known problem of using ClearType fonts on Windows, not bound to any specific web browsers. Read this very clearly explanation font-face-loaded-on-windows-look-really-bad-which-fonts-are-you-using-that-rend
This problem should not affect Windows 7 and/or IE9 users.
My suggestion is to implement your big block of text using transparent PNG using the -9999px technique that satisfy the SEO requirements. Have a look at this for the original famous -9999px css-image-replacement-technique/ or this for the newly developed technique Replacing-the-9999px-hack-new-image-replacement/
Unfortunately as far as I know there isn't anything you can do in code that can help, but it can be remedied a bit in your own browser by going to about:config then toggling gfx.direct2d.disabled to true. Hopefully that'll help some.
Webkit is an awful renderer in my opinion. As a web designer/developer, I take into account how my design looks at every magnification. Webkit handles this extremely poorly. Margins, padding, and borders all get rendered extremely poorly across various magnifications and there is no CSS you can use that is "cross-zoom" compliant in WebKit. Zoom in and out of any webpage in IE, Firefox, Opera and it is consistent. Take a look at this site, for instance:
http://development.mminc.co/davidphotos/
Try using the carousel at the bottom at different magnifications in IE or Firefox. Works fine, right? Now try the same thing in Chrome or Safari. BOOM! A developer's nightmare! Please, if anyone knows of any tricks of the trade to get Webkit to behave with something that even Trident is able to successfully do I'd like to hear it. I've heard of a jQuery zoom plugin, but that is sort of a last resort. I've looked everywhere for the issue but no one even mentions Webkit zoom issues. It's like it's taboo or something. Personally I think it's one of the biggest blunders of the modern browser era, especially when such a (otherwise) great browser like Chrome is giving me more trouble with presentation issues than IE7.
EDIT: I feel I should be more general and use an example where it is obvious only HTML and CSS are implemented.
http://www.gamespot.com/
Webkit forces a line-break with the top menu w/ zoom tests, but other browsers don't. It is a major issue with the engine and if there are any concrete solutions I'd like to hear them. If there isn't then I think this issue should be addressed and resolved immediately; it is an eyesore to users and a nightmare for developers. The fact that it isn't addressed anywhere on the net is troublesome.
This isn't answering how to fix WebKit zoom issues in general, but it should help with your specific problem.
You're using jCarousel.
Even the simple demo shows the same problems you describe.
So, that plugin is simply broken when it comes to zooming with WebKit browsers.
You could either ask the author of the plugin for advice, or find a different carousel plugin.
For instance, this one doesn't seem to have any problems when you zoom in using a WebKit browser:
http://www.thomaslanciaux.pro/jquery/jquery_carousel.htm (look at the "dispItems" demo)
Seems to be a Mac only issue.
I noticed that in in some colors (light ones mainly) when you scroll the browsers, the color mix up and form another one*
What do I mean:
See this list on wikipedia.
When you scroll up and down, the pink squares turn yellow.
Here is an isolated example.
I find this sort of annoying (Maybe because it's friday).
I also noticed that with other more opaque colors this doesn't happen or is not noticeable.
Has this problem any solution?
Is it a poor choice of colors for web design or is it a browser error?
Does it happen in all browsers?
Thanks in advance!!
*Tested in Chrome and Safari (Mac).
Sory I can't show any screenshots because this happens while scrolling, and can't record it either cause the definition (or fps or smth) is not enough - the problem is quite subtle.
Does this "mix-up" persist when you stop scrolling?
If not, it may be an optical illusion - and you will see it in every browser, as long as it's redrawing its viewport quickly enough. Unless you can rewire the brains of your users, there is indeed no solution to that - it's just an artifact of human optical signal processing.
If, however, the "mix-up" stays mixed up when you stop scrolling, you may have encountered a browser bug (a strange one, as Webkit-based browsers usually give very similar rendering across platforms).
I can tell you that it doesn't happen in Chrome or Firefox on Windows 7, but does happen in Internet Explorer (though I'm not sure I would have noticed if I hadn't been specifically looking for it), so likely a browser/OS issue.
The solution would probably be to choose colours that this isn't a problem with.
Should i check in all? or in any one is enough because all share same rendering engine Webkit.
My question is related to HTML CSS rendering.
I know one difference Safari for windows and MAC both have Font smoothing (anti -alisaing)
Is there any other differences?
There's definitely a difference between Chrome and Safari due to Safari's font rendering. In Safari text tend to be a bit bolder due to the anti-aliasing algorithm and can sometimes take up a few extra pixels on the screen.
Also keep in mind that Safari uses the SquirrelFish javascript engine while Chrome uses V8.
I have found a difference in the way Safari and Chrome select SELECT boxes. I think Chrome seems to ignore line-height whereas in Safari line height seems to make a difference.
Safari Windows 5.1.7 v's Chrome Windows Version 22.0.1229.94 m
I think this is to do with the default user agent style?
I would check, yes.
Whilst the browsers all use the same rendering core, they're not necessarily on the same version (and there are multiple versions of Safari out there in any case).
Also, as slebetman says, font rendering is quite different depending on OS and anti-aliasing settings too, so you need to be aware of that.
Shadows are fast&ugly in chome; slower&prettier in safari (and firefox). IIRC there was some difference in CSS3 transitions too - but really, these details are still in flux anyhow and change from version to version.
In practice, I only check one of the two regularly, which is generally fine. Before putting major changes online, it's obviously not a bad idea to check again, but during development, it's not worth the hassle; they're so similar anyhow...
There are major and minor differences. Do check!
Minor: full support for CSS3 border-radius in Chrome. I've read about, but can't find, this in Safari.
Major: zooming in Chrome zooms everything. (This is the behavior in almost every browser.) Zooming Safari zooms text but leaves other things unchanged. Your ever-so-carefully-laid-out form is highly likely to be trashed if the user zooms in. Leave lots of extra space.