twitter facebook dribbble email

Cufon makes IE8 jump a few pixels on hover

Careful! This post is looking a little old and could be inaccurate in many, many ways

The title pretty much says it all. Today I spent the best part of the day trying to solve a problem that I wasn’t even sure anyone had ever experienced before. After hours of wishing a painful death to the site I was supposed to be lovingly crafting I came across an unusual solution.

The problem in a nutshell

For font replacement I use Cufon, and the site I’m currently working on uses it for a number of headings and links. To get the hover effect of links working properly with Cufon you have to add {hover:true} into the cufon.replace function. This is where the problems started.

With all this in place the site would shift 1px to the left when any Cufon styled link had the mouse move over and out of it. This only seems to happen in IE8, no other browser or version of Internet Explorer had an issue with my mousey movements.

What was most annoying was that although the issue doesn’t occur in IE7 it does in the IE7 mode of IE8. Luckily I have Virtual PC with IE7 to do some accurate browser testing.

The solution

I tried everything I could think of to find a solution. I’d tried Google, the helpful people on Twitter, I even started stripping out CSS and HTML to ensure other elements weren’t conspiring with Cufon to send me insane.

Out of nowhere it appears that removing the function fixed the problem. Anyone who uses Cufon knows this is used to stop the FOUC (Flash Of Unstyled Content). If I could find an alternative way to stop the FOUC I’d then have my perfect solution.

After a couple of failed attempts I added the following into the CSS which seemed to solve the problem:

Now rather than a FOUC you get a FOFA (Flash of Fuck All). It’s not perfect by any means but it appears to be the best solution I could find, in fact pretty much the only solution I could find.

However since this issue was only IE8’s and IE7 and 6 had played nice with Cufon I used conditional comments in order to use the function for these older browsers and then put the CSS fix in an IE8 only stylesheet.

If you have had a similar issue and have a better solution please let us know, and hopefully the Cufon developers will solve the issue in a future release.