CSS Sprites + Firefox Content Preferences = Site Go Boom

I arrived at work today with a perplexing tech support e-mail in my inbox. A customer was claiming that although Redfin had never worked well in Firefox, last week we totally broke it. Needless to say, we were all a little surprised (and more than a little worried) over here, since we use Firefox all day every day. When we asked the user to send us screenshots, they looked something like this:

No Color Screenshot

This is when we got well and truly confused. It looked like the browser was downloading our CSS, because items were appearing in the right place on the page, but all color had drained out of the world. Was Firefox in some sort of a funk? At first, we guessed that perhaps the user had some sort of ad blocker that was blocking images from our content delivery network, but we quickly noticed that some images made it through. What was going on here? Solution after the jump.


On closer inspection, it became clear that all of the images that were failing were actually background-images set in CSS; images added to the page as normal IMG tags were working fine. Unfortunately, we use CSS sprites in our site wherever we can to speed up performance, which means that the vast majority of the images in our UI were invisible to the user.

The next question was: why on earth would this be happening? Well, it turns out that Firefox has a preference that allows a user to override the colors specified by websites and use a default color scheme the user wants. This preference not only affects text color, but it also eliminates all background-images on the page.

A week ago we released a new version of Redfin with a bunch of fixes, one of which was that we moved the icon for houses on the map into a CSS sprite, which made the icon disappear for the poor user who had this pref set in Firefox. After we gave the user instructions on how to turn off the preference, it worked like a charm. (For the record, you turn the pref off by going to Tools –> Options in Windows XP or Firefox –> Preferences… in Mac OS X, then Content Tab –> Colors… –> Check “Allow pages to choose their own colors, instead of my selections above”.)

As programmers, what should we do here? I’ll admit I haven’t thought through a good solution yet, and we don’t want to abandon sprites outright for performance reasons. One thought I’ve had (but not tested yet): perhaps we could use JavaScript to test if the background-image properties are not getting set and in that case replace the critical background-imaged elements with normal image tags. It doesn’t sound like much fun, and it’s probably too small a use case to worry about, but it’s worth a try.

Thoughts about this problem? Solutions? Let me know in the comments.

Discussion

  • http://www.townhall.com Chris Bower

    Ugh! Thanks for the heads up. We just switched some of our site over to CSS Sprites, and I’m surprised we haven’t seen this complaint yet.

    Doesn’t developing a site for a large user base just suck sometimes?

    Chris Bower
    Web Developer / Team Lead
    Townhall.com

  • Lawrence

    You should * always specify both a foreground and a background colour, as recommended by the W3C, for these reasons!

  • Mark

    Please consider accessibility issues (http://www.w3.org/WAI/guid-tech) when using features like CSS sprites; some users may need larger fonts or different colors.

  • http://blog.caffeinatedsoftware.com Robbie

    Another gotcha (which you may or may not know about) is that pages w/ CSS sprite don’t print because most browsers don’t print background images.

    As a programmer, I’d try serving up inline images via the data:[][;base64], urls, to the browsers that support them. Which seems to includes every browser not engineered in Redmond, WA (haven’t tried IE 8 yet – so there’s still hope).

    See the following for examples and documentation…
    websiteoptimization
    Wikipedia
    IETF
    HTML guru on how you get it to work on IE

    Keep up the great blog posts…

  • Maarten van der Pijl

    Hi Sasha!

    First of all: this comment is way off-topic.
    I am sorry if this is inappropriate, but I have a special request and don’t know how I can reach you in another way.

    Last december I was in Thailand and met Mike & Marquez.
    We agreed to contact each other to exchange photos, but I have lost their email address and I haven’t heard from them too.
    So I googled for Mark & Marquez and arrived at your Flickr site.
    Would you be so kind as to send me their email address?

    Thanking you in advance.

    Maarten van der Pijl
    The Netherlands

  • ecocaJesTaide

    Councillor Padawan Municipal Council

    Exco Wanita SPDP