Search code examples
cssgoogle-chrometexttext-rendering

text rendering going blured on hover in chrome

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!

Solution

  • 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;
    ....
}