Cufon makes IE8 jump a few pixels on hover

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

.cufon-loading{text-indent:-9999px;}

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 cufon.now 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.

Comments

  • Frog

    Hey that’s a really nifty little hack, I’ll have to give it a try. I’ve used Cufon on one site now but didn’t need the :hover, I’m sure when I do this will save me alot of head scratching

  • Eric

    Any update on that? They still shift for me slightly in IE8 on hover. Esp is a page has a scrollbar. Seems to be better on pages that don’t scroll which is odd too.

  • Jack

    Hey thanks for this tip… Was really starting to bang my head there…

  • Zainab

    Hey i tried it, put the issue is still der. Any other solution?? If i remove cufon.now() den it seems to solve it. but need it for faster loading in IE.

  • Kean

    @Zainab I can’t say I have investigated the issue any further. Recently I have not been using Cufon on all that many projects due to the increased support for @font-face.

    If the font you are using is available for use with @font-face I’d recommend maybe giving that a whirl.

  • Zainab

    Hey Thanks will use ‘font-face’ for my next project if font is der. However gt this IE8 bug solved. I was using ‘jquery-1.3.2.min.js’ instead updated it to ‘jquery-1.4.2.min.js’ n dat jump on hover issue got resolved :) .

  • Milos

    This worked for me for cufon flickering when clicked on ie8, interesting hack, thank you very much.

  • Sascha

    Hoi Kean

    I was discovering this bug this morning…very sad. Why is that occuring all of a sudden, when i built up the site it wasn’t!

    Well sadly all the fixes are not working at my case, not even updating jQuery. All my Cufon shift 1px up when hovered.

    My solution was it to set some css in a conditional Comment for IE 8 only.
    For all box elements i just set margin-top: -2px; For all List-Elements i’ve got it to work with a higher line-height… this is so annoying.

    Greets
    Sascha

  • Maggie

    This is pretty strange, none of the above worked for me, however by adding a padding left rule with 3px on the overall wrapping element seems to have solved it for me.

  • Dmitry Pavlov

    This helped ne to avoid strange on hover pixel with cufon put all my js/css files before cufon ones: https://github.com/sorccu/cufon/wiki/styling

Write a Comment