text rendering going blured on hover in chrome [closed]

Question

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.

Closed 8 years ago.

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);}