text rendering going blured on hover in chrome [closed]

Question

I have a problem with text going blured on hover Version 27.0.1453.110 Chrome Mac OS X, but maybe on Windows too.

Link to see is here - http://hqm.gr/jam-for-fun-2013-report - hover on the video gallery bottom menu

Thank you!

Answer 1

I couldn't give you the reason why this works, but you need to add -webkit-backface-visibility: hidden to the element that is undertaking the CSS3 transitions

(kudos go to @JugularKill for his answer found here)

The reason this is particularly funny (to me at least) is that backface-visibility in Chrome is considered broken/buggy!

So the solution, in your particular case, would be:

.videogallery .navCon .navigationThumb {
    ....
    -webkit-backface-visibility:hidden;
    ....
}

Answer 2

It doesn't get blurred here on Chrome 27.0.1453.110 on iMac. It does in fact compresses the text height or size for one second when I mouseover or mouseout, but then returns to normal size quickly. Check your definitions for font / text size.

I just checked your css and the text-shadow: is being applied on hover, but is broken in two lines:

        .main-navigation a:hover,
        .widget-post.pm-first a:hover,
        .ticker-content a:hover,
        .utilities ul li a:hover,
        .cat-tabs ul li a:hover
        {color:#ffffff; text-shad
        ow: 0px 0px 2px rgba(255, 255, 255, 0.3);}