CSS text-shadow can kill performance

So, I’m trying to add a little polish to my snakes game. I was working on displaying the current score and wanted to make it stand out a little bit…

Inspired (just a little) by a friends rainglow I thought I could use a subtle text-shadow to make the score pop a little, maybe even change the shadow color when you surpass the current high score, but boy was I surprised when this tiny piece of css:

#score {
  text-shadow: 0px 0px 1em red;
}

Dropped my frame rate down from a rock-solid 60fps, to a staggering, stuttering 1-2 fps.

trust me, its hard to see in this screenshot, but thats a good looking glow!

A brief bit of digging shows that if the text-shadow is applied to some static HTML element then there is no real problem once that element has been rendered, but because I am frequently updating the innerHTML of the score element the browser needs to re-render it and the text-shadow can cause that to take up-to a whole second! dropping the frame rate through the floor.

I suspect its a worse hit for this case because the browser is applying the text-shadow to a custom CSS web font, but some brief experimenting shows a similar (though milder) hit even when rendering standard fonts.

So, lesson of the day, don’t use css text-shadow on content that changes frequently (or at all!)…

… and back to the drawing board for deciding how to make my score stand out.

Can’t win ’em all.

P.S. This was a brief experiment using the chrome browser, other browsers might be better (or worse), some magic incantations to enable hardware acceleration might make it better (or worse) - YMMV.

P.P.S. rainglows are evil.