How to Avoid Background Color Matching Problems with Safari
With Safari now hovering around 8% of browser market share, it is important that web developers and designers test it almost as thoroughly as they would Firefox. Although the numbers don’t lie, plenty of developers/designers still don’t test Safari at all. Even those who do are easily prone to missing this one, as it’s rather difficult to see on lackluster monitors. There is a little-known issue in Safari where color in images mismatches with the CSS background colors. I won’t pretend to know the nitty-gritty details of how this works, but essentially Webkit renders CSS hex codes slightly different than it renders image colors.
Safari Background Image-Color Mismatch
Normally this background image/color mismatch is not noticeable enough to be a problem. However, if you are trying to fake transparency, and part of your image is meant to look like the background, the image/css color profile difference becomes immediately visible on modern monitors, since the background image intended to blend with the CSS solid color does not quite match up. This is shown in the image to the left, but again, you have to have a nice and bright monitor to see it. In case you’re having trouble seeing it, I highlighted the edges of the image, where the gray varies slightly, in the second image below and to the right.
Safari Background Image-Color Mismatch (highlighted)
I cringe every time I see this image/background mismatch, so I wanted to post an easy solution to the annoying Safari background bug that you have NO EXCUSE not to implement. When you run into problems with a image/background mismatch, you’re always working with a solid color in the background. So the easiest solution may seem obvious, but I find it worth posting about since not enough web designers use it.
The Fix
Instead of using a CSS background color, use an image. Just make a 25×25 image, with the mismatched color. The exact size doesn’t matter, I like 25×25 as it’s small enough to take virtually no time to load, but big enough that you’re not sacrificing that benefit to a slower rendering time (having to render an image a million times slows down the page render a bit).
The only code you’re going to change here is the CSS on the element with the background color. Where you used to have background-color: #FFF; (or simply background: #FFF;) you will now have something like background-image:url(bg_solid_color.gif); depending, of course, on your background image’s location.
I know this isn’t groundbreaking, most developers could figure this out with a bit of thinking. But I wanted to bring it to as many people as possible because I see this problem on the web far too much, whether it’s because people don’t care about Safari (a big mistake) or don’t ever see the problem because their monitor doesn’t show it too well. So I hope this trick is beneficial to you, and I hope you use it instead of just letting your page look amateurish in Safari. If you run into any hiccups with this method, or have a better method, please feel free to post in the comments. I’m not so naive to claim this is the best fix to the Safari background image-color bug, but it’s easy to implement, valid/semantic code (hardly any code changes at all), and most importantly: it gets the job done.
October 12th, 2008 at 10:02 pm
Another way to ‘fix’ the problem is to simply start the header image (or whatever image that utilizes the transparency) off in your graphic editor of choice with a transparent background. In my experience, additional graphics - no matter how small the size - slow down the loading of a site, especially if the image is repeated for a background.
And, yes, I agree that not enough web developers test with Safari. I’m pleased to say that as a front-end web developer, I test my sites in Firefox, Internet Explorer (6.0 and later as the web standards have changed between those versions), Safari, Opera, and Chrome.
October 12th, 2008 at 10:10 pm
Ah yes, a transparent background is definitely ideal. However, if you’re working with PNGs, IE6 will show a white box, which is a problem for most developers since IE6 is still around 20% market share :( You’re right though, transparent is the better fix, when available. You listed the exact sites I test for (although I never test previous versions of Opera, I find them terribly inconsistent at times).
Thanks for sharing! I hope to see you around here more as I get more articles rolled out!
October 12th, 2008 at 10:35 pm
That problem with IE6 showing the white/grey box is an extremely frustrating one to deal with and one that has no real truly ’satisfying’ solution. You can use GIFs, but then you don’t get the color fullness and richness that a PNG file can offer. You can NOT use transparencies, but then you get potential visual issues if you’re utilizing z-indexes in your site coding or doing anything that results in a layering sort of effect.
It’s funny you should mention that because I just finished writing about the troubles that come when attempting to code IE6-friendly.
One would think that coding up to par with web standards should mean that the site will render in any web browser, right? But because IE6 and below are NOT up to web standards (and neither is Netscape for that matter), then to make a site ‘work’ in non-standard browsers, a web developer is forced to code ‘fix-it codes’ that can break their previously standard and valid code.
To me, that’s just backwards. There’s a reason for web standards! Use them!
But you’re right; stats show that 20% of people still use IE6 and I can’t really blame them in some ways because IE7 isn’t a much better option (in my opinion).
October 12th, 2008 at 10:43 pm
Yep, the woes of IE are limitless to us web devs. I share your sentiments about Microsoft’s blatant disobedience to the well established W3C web standards. I think IE7 is a big step forward from 6, but still lightyears behind everything else. Small companies can do whatever they want with their software. When you’re a big monopoly like M$, however, you have certain responsibilities to the public, and I think that their disregard of the standards, ignoring the desires of every single web developer I’ve ever had the pleasure of meeting, is holding the whole Internet back and is downright criminal.
I actually have an article about IE and all its problems in the pipeline, so stay tuned for that one!
October 12th, 2008 at 11:25 pm
I’ll definitely be waiting for the article.
In my opinion, more people need to speak up about this problem with M$FT refusing to stick with web standards. The standards have been established for a long while now; why not follow them when the majority of the other available browsers do?
Additionally, here’s this bit of irony: Every web dev worth their salt that I’ve had the pleasure of meeting myself has been figuratively put through the wringer when applying/making bids for web design jobs because their potential employers/commissioners ALL want their sites to be up to web standards and valid and as accessible to everyone as possible. BUT of course, a valid and standard-coded site oftentimes will not successfully show up as it should in IE6 - a browser that still has a 20% market share - and most of these employers/commissioners have NO idea about this.
What’s a web dev to do?
People are demanding standard and valid coding, but IE6 with it’s freakin’ 20% market share refuses to render a lot of the said standard and valid coding properly.
October 12th, 2008 at 11:47 pm
Yep. To be honest, most of my clients don’t care about standards. I simply respect the standards because once you know them it’s hard not to, and because you tend to run into less problems along the way. You’re right though, sometimes you will run into issues with IE6 that are either impossible or just extremely difficult to correct using standards. When it comes down to a choice between 8 extra hours of work, or an easy hack that violates standards, the hack usually wins.
March 17th, 2009 at 9:48 am
I could be mistaken, but I think your just seeing the effect of Gamma brightness mismatches. The gamma value in css colors isnt matching the gamma value in your images - especially obvious when using PNG files (at any bit depth). Thats probably why using a background image works for you.
If this is the case, the proper thing to do is to strip the gamma value in your images.
July 17th, 2009 at 6:04 am
I am relatively new to the wonders of web design/devt and have been looking for a solution to this for a few weeks now, my site has gradients which blend in and out of the background, it only does this in Safari - though only on Mac version not PC. It appears as if the coloured background is lighter than in other browsers. I assume this should work for a coloured background also?
August 29th, 2009 at 2:33 pm
Jacob, you could be right, I am not sure the specifics of the problem, but I couldn’t find much information about it elsewhere and this is a simple fix that gets the job done. Next time I run into this issue I’ll give what you mentioned a shot :)
Steve-O, not sure I understand what you mean by a colored background … all backgrounds are colored, even white is a color as far as the monitor is concerned. So yes it should work, unless I’m misunderstanding you.
September 6th, 2009 at 11:03 am
[...] is due to Why Wait Webs, for helping me solve this dilemma. The gist of the problem is that in Safari, color in images [...]
September 7th, 2009 at 4:37 pm
The images have a Color Profile that cause the discoloration. If you remove the Color Profile from the image you do not have to perform the workaround with the background image.
October 23rd, 2009 at 4:05 pm
[...] All currently available versions of Internet Explorer incorrectly display colors in PNG images. To work around that, instead of setting a background color, you can use create 1×1 pixel image with the color you want, and set it as a repeating background image. [...]
February 11th, 2010 at 6:47 pm
I understand the suggestion made above about using a background image instead of a color; but our problem is that we are using both a background color and an background image in the body tag. The background image is a gradient that changes from a dark gray to a lighter gray across the top of the web site, and the background is the lightest gray at the bottom of the background image. So, any suggestions on this?
February 12th, 2010 at 7:43 pm
April,
I think my best recommendation for that situation would be to try out what Jacob mentioned above, removing the gamma from the mismatched image(s). I’ve never tried this method but it should work.
Best of luck solving your problem!
February 19th, 2010 at 4:55 am
Just had to resolve this issue for one of my clients by stripping the color profiles of the PNGs in question. You can remove all of the color correction chunks of a color profile using pngcrush, or TweakPNG, links to these and more info here: http://hacks.mozilla.org/2009/06/color-correction/