在chrome中悬停时文本渲染变得模糊[关闭]答案

【问题标题】：text rendering going blured on hover in chrome [closed]在chrome中悬停时文本渲染变得模糊[关闭]
【发布时间】：2013-06-12 20:02:46
【问题描述】：

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

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

谢谢！

【问题讨论】：

我在 Windows 上的 Chrome 27.0.1453.110 上没有看到模糊的文本。
我在 28.0.1500.44 beta-m 上得到它。尝试禁用 css 转换，看看会发生什么。我猜这与悬停时的过渡和不透明度有关。

标签： css google-chrome text text-rendering

【解决方案1】：

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

（感谢@JugularKill 的回答found here）

这特别有趣的原因（至少对我来说）是 Chrome 中的 backface-visibility 是 considered broken/buggy！

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

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

【讨论】：

【解决方案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);}

【讨论】：