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:
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.