css - 文本渲染在 chrome 中悬停时变得模糊

Question

我在悬停版本 27.0.1453.110 Chrome Mac OS X 时出现文本模糊的问题，但也可能在 Windows 上。

要查看的链接在这里 - http://hqm.gr/jam-for-fun-2013-report - 将鼠标悬停在视频库底部菜单上

谢谢！

Answer 1

我无法告诉你这样做的原因，但你需要添加-webkit-backface-visibility: hidden到正在进行 CSS3 转换的元素

（感谢@JugularKill在这里找到他的答案）

这特别有趣的原因（至少对我来说）是backface-visibility在 Chrome 中被认为是损坏/错误！

因此，在您的特定情况下，解决方案将是：

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

Answer 2

在 iMac 上的 Chrome 27.0.1453.110 上，它不会在这里变得模糊。当我将鼠标悬停或鼠标悬停时，它实际上会压缩文本高度或大小一秒钟，但随后会迅速恢复到正常大小。检查字体/文本大小的定义。

我刚刚检查了您的 css 并且text-shadow:正在应用悬停，但分为两行：

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