Webkit, jQuery & text-shadow rendering

We’ve been working on a new site for an iPhone developer, and ran into some performance issues with Safari and Chrome. Looks like Webkit has trouble with text-shadow..

Safari and Chrome have a bit of trouble with text-shadow..

So there I was, merrily developing a new site for a client.

The three product panels were fine, but I wanted to add a little animation to reveal further information, so I turned to my favourite javascript library, jQuery.

Using jQuery to move things around, fade them in and out and generally spice things up is pretty common these days, so I was surprised when I ran into a few performance issues testing the site in Webkit-based browsers Safari and Chrome that I hadn’t heard about. Both were having a big problems with all the motion and fading, with some serious and unacceptable lag. Firefox and IE didn’t share these problems, so I wracked my brains trying to work out what might be the cause.

Usually Webkit-based browsers hold up as well, if not better than the other big-names. I checked if it was a problem with transparent .png elements or overlaid background graphics – nothing. I tried changing my jQuery code to use other methods instead of .fadeTo and .animate, but that didn’t fix it either.

Throughout the site I’m using the CSS3 text-shadow property to give the copy a nice finish against the background, making it stand off in a more interesting way.

text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.8);

This is something that IE doesn’t even support, and which is rendered differently depending on the browser platform – I realised that the way Webkit and Gecko (which Firefox is built on) render this is probably quite different, and tried removing the property from my panel <li>.

Voila.

This seems to be a pretty major issue for what is likely to be a much-used property over the coming years. Testing further, it seems that Safari (Windows) has particular trouble with this, even slowing on pages that contain no animation, effects or otherwise – it’s simply a bit slow at rendering text-shadow..

For now it seem I’ll have to set this property just for Firefox, which is not really ideal. But we live and learn, and that’s yet another thing to keep in mind when designing for the web.

UPDATE: I also note that Chrome makes a meal of kerning when text-shadow is applied. This can be resolved by using a 0px blur.