Chrome字体显示模糊

Question

它把我的眼睛都弄疼了！

在IE和Firefox中显示良好

​

​

Chrome(上图)

运行chrome的39版本，只在模式框中显示模糊，如果我改变字体系列，没有任何不同。

这是浏览器呈现以下内容的CSS (代表标签"Start")

box-sizing: border-box;
color: rgb(85, 85, 85);
cursor: default;
display: block;
float: left;
font-family: sans-serif;
font-size: 12px;
font-weight: 600;
height: 24px;
line-height: 17.142858505249px;
margin-bottom: 0px;
margin-top: 0px;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
padding-top: 7px;
position: relative;
text-align: right;
visibility: visible;
width: 89.65625px;

是浏览器还是CSS？

--更新--

Ok看起来像是这个CSS

.md-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    max-width: 630px;
    min-width: 320px;
    height: auto !important;
    z-index: 2000;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(-50%) translateY(-50%); <--- This line
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

但是，如果我把它拿出来，我的模式就不再是中心了？

Answer 1

我通过从Y轴的值中减去0.5px修复了这个问题。所以而不是：

transform: translateX(-50%) translateY(-50%);

我这样做了：

transform: translateX(-50%) translateY(calc(-50% - .5px));

这为我解决了它，我发现这是一个更干净的解决方案，然后摆弄百分比或使用Javascript。

Answer 2

在对我的一个元素应用translate transform之后，我在chrome上遇到了同样的问题。这似乎是chrome上的一个bug。唯一对我起作用的是：

#the_element_that_you_applied_translate_to {
  -webkit-filter: blur(0.000001px);
}

另一种解决方案是打开平滑字体渲染：

#the_element_that_you_applied_translate_to {
  -webkit-font-smoothing: antialiased;
}

Answer 3

This fiddle tests out a few different solutions来源：

• CSS transition effect makes image blurry / moves image 1px, in Chrome?
• WebKit: Blurry text with css scale + translate3d
• http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/

测试输出

​

​

修复0

-webkit-transform: translateZ(0);
transform: translateZ(0);

解决方案3

-webkit-transform: translate3d(0,0,0) !important;
transform: translate3d(0,0,0) !important;