So, Fire­fox 3.6 is finally here, and on aver­age it’s 20% faster than 3.5. It’s actu­ally a really notice­able improve­ment for both ren­der­ing and scrolling around pages; I’d say it’s more or less on a par with Safari on most pages. I hear from Win­dows using friends that it’s sim­il­arly quicker on that plat­form too, approach­ing the speed of Chrome, in places. All of which makes this a little odd.

I noticed, not long after the upgrade that my blog (this page, unless you’re read­ing a syn­dic­ated copy,) was scrolling really, really slowly in Fire­fox, which it had never done before I upgraded. I checked it in Safari to reas­sure myself that it wasn’t some­thing wrong with the site, and everything was fine; scrolling was smooth and respons­ive just like it has always been. I checked Fire­fox 3.5 on my mac­book; same thing. I dis­abled all my fire­fox addons and tried again on the desktop: still pain­fully slow. So I re-​​enabled some of them and star­ted mess­ing around with fire­bug, dis­abling vari­ous style ele­ments to see if I could fig­ure out where the slow­down was com­ing from.

It didn’t take me long to find the cul­prit: shad­ows. I try to avoid using images in my pages as much as pos­sible to improve page load speed, so I use box-​​shadows to give a bit of depth to the wid­get box-​​outs; they look even more flat and drab without them. I also find that a subtle text-​​shadow is a great way to increase text con­trast without mak­ing the page harder on the eyes, which is a big deal for any light-​​on-​​dark dis­play (at least until someone intro­duces a decent super-​​light web­safe font,) so I make heavy use of that too. None of this has ever had any notice­able per­form­ance impact before, but here we are; with the new, optim­ised, gecko engine it renders like arse.

I thought per­haps there was some­thing else about my CSS that was con­fus­ing the ren­der­ing engine — it’s hardly the most min­imal or eleg­ant set of style defin­i­tions in the world — so I knocked together this abuse of text-​​shadow to prove that it’s the prob­lem. As expec­ted, it renders fine in Safari and older Fire­foxes, but incred­ibly slowly in Fire­fox 3.6, so it’s def­in­itely some­thing to do with the new browser.

Next check was to see if it affects FF3.6 on other plat­forms, so I fired up my Win­tendo, upgraded Fire­fox and tried the page. No slow­down. I don’t know how rep­res­ent­at­ive that is though; that box is a quad-​​core 3GHz Nehalem with 6GB of RAM and a GTX295 in it; it’s got about twice the graph­ics oomph of my Mac (which is a 3GHz Core2 Duo with an 8800GS), and I don’t have a slower win­dows box to test on. So this is a bit incon­clus­ive; I can’t really det­mine whether the issue is con­fined to the Mac ver­sion of Fire­fox, or to Fire­fox on machines that can’t run Crysis at 60fps. But, hon­estly, I don’t think it matters.

Long story short; my site renders really slowly on the latest, greatest ver­sion of Fire­fox, which is an issue. I make no bones about the fact that I don’t give a monkey’s how it renders in IE, but I do like to make sure it gives a good exper­i­ence in decent browsers, which by my defin­i­tion means any­thing web­kit or gecko based. Fire­fox is by far the most pop­u­lar browser in that cat­egory, so I can’t just ignore this. The ques­tion is what to do?

I can sit around and hope that 3.61 fixes the prob­lem, but that is basic­ally just ignor­ing it, tak­ing no respons­ib­il­ity, and means that my site sucks until someone else fixes their browser, which might never happen.

Or I can reskin the whole site such that it looks OK (or at least as OK as it looks now) without rely­ing on shad­ows. The prob­lem is, I’m not a web designer, so that’ll take me ages, and I only just got the place look­ing how I want with this design. It’ll also, inev­it­ably, mean mov­ing back towards the bad old way of doing things, using back­ground PNGs to try to give the site any sense depth or char­ac­ter, and I really don’t want to do that; I want to be able to use stylesheets to define the style of my page, not rely on image-​​based work­arounds. Admit­ting that I need those work­arounds feels like giv­ing up. Maybe the state of browser tech­no­logy just isn’t up to that out­look yet.

Basic­ally, I see no entirely sat­is­fact­ory way out of this situ­ation; I’m just going to have to decide which solu­tion is the least unsat­is­fact­ory. I’m going to have to give it some thought.