Css 使用transform:translate3d（）时，Chrome中的图标字体模糊；_Css_Glyphicons_Icon Fonts

Css 使用transform:translate3d（）时，Chrome中的图标字体模糊；

css

Css 使用transform:translate3d（）时，Chrome中的图标字体模糊；,css,glyphicons,icon-fonts,Css,Glyphicons,Icon Fonts,当有一个元素使用变换动画时，我遇到了图标字体模糊问题（以及元素闪烁）。这似乎是Chrome浏览器的一个已知错误，这里有一个提到它的地方：下面是一个JSFIDLE示例，在Chrome中打开它，然后将屏幕向右后倾斜，以便更好地看到图标字体模糊代码示例： <head>  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootst

当有一个元素使用

变换动画

时，我遇到了图标字体模糊问题（以及元素闪烁）。这似乎是Chrome浏览器的一个已知错误，这里有一个提到它的地方：

下面是一个JSFIDLE示例，在Chrome中打开它，然后将屏幕向右后倾斜，以便更好地看到图标字体模糊

代码示例：

    <head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <style>
        .topbar {
            position: fixed;
            z-index: 999;
            top: 0;
            width: 100%;
            height: 51px;
            border-bottom: 1px solid rgba(0,0,0,0.25);
            background: #fff;
        }

        .glyphicon {
          margin: 15px 0 0 20px;
          font-size: 12px;
        }

        .animation {
            width: 400px;
            height: 200px;
            background: #aaa;
            transform: translate3d(339px, 0px, 0px);
        }
    </style>               
    </head>

    <body>
        <div class="topbar">
        <span class="glyphicon glyphicon glyphicon-film" aria-hidden="true"></span>
        <span class="glyphicon glyphicon glyphicon-th" aria-hidden="true"></span>
        </div>
        <div class="animation"></div>

        <br />scroll past animation element to see icons blur<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </body>


.顶杆{
位置：固定；
z指数：999；
排名：0；
宽度：100%；
高度：51px；
边框底部：1px实心rgba（0,0,0,0.25）；
背景：#fff；
}
.字形图标{
利润率：15px 0 20px；
字体大小：12px；
}
.动画{
宽度：400px；
高度：200px；
背景：#aaa；
转换：translate3d（339px，0px，0px）；
}

滚动动画元素，查看图标模糊

（在我的网站上，我认为图标模糊更明显，因为我使用的是不同的图标集）

您将看到顶部导航元素上的图标字体模糊，这是一个

位置：固定；排名：0；宽度：100%；z指数：99999元素。当旋转木马元素通过滚动在屏幕上不可见时，顶栏中的这些图标字体会模糊
有没有办法修复这个图标字体模糊？我尝试过很多方法，比如字体平滑：抗锯齿在图标上，但不修复它。我的topbar元素也需要保持原样，它具有位置：fixed
，并且z索引高于所有其他元素。非常感谢您的帮助。
您使用3D转换有什么原因吗？使用2D转换似乎解决了这个问题：transform:translate（339px，0px）谢谢你的评论。这确实解决了问题。我使用的是旋转木马滑块插件，它使用translate3D（），如果不需要translate3D（），我会尝试联系插件开发人员将其更改为此。否则，我可以编辑插件js文件，并在插件升级时进行更新。由于使用3D transform会将内容卸载到GPU，因此浏览器使用硬件合成，它提高了性能：也许这就是插件作者使用transform3d
的原因，即使它没有在z轴上被转换/移动。您使用3D转换有什么原因吗？使用2D转换似乎解决了这个问题：transform:translate（339px，0px）谢谢你的评论。这确实解决了问题。我使用的是旋转木马滑块插件，它使用translate3D（），如果不需要translate3D（），我会尝试联系插件开发人员将其更改为此。否则，我可以编辑插件js文件，并在插件升级时进行更新。由于使用3D transform会将内容卸载到GPU，因此浏览器使用硬件合成，它提高了性能：也许这就是插件作者使用transform3d
的原因，即使它没有在z轴上被转换/移动。