Chrome字体显示模糊

Question

这是我的目光!

在IE和Firefox中看起来很好

Chrome浏览器(上图)

运行版本39的chrome,只在模态框中显示模糊,如果我更改字体系列没有任何区别.

这是CSS(用于标签"开始")浏览器呈现以下内容

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？

--update ---

好吧看起来像这个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转换应用到我的一个元素后,我在chrome上遇到了同样的问题.这似乎是一个关于chrome的错误.唯一对我有用的是:

#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

这个小提琴测试了几个不同的解决方案:

• CSS转换效果会使图像模糊/移动图像1px,在Chrome中？
• WebKit:带有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;

Answer 4

解决这个问题的唯一正确方法:

这个问题源于使用%值来使用css变换对齐div的事实.这会导致小数点子像素值,您的屏幕无法正确呈现.解决方案是将得到的变换矩阵归一化.

对于不进行动画转换的固定div,可能会更好.但是如果你做动画,你可以使用后端回调函数来纠正最终状态.

所以: 矩阵(1,0,0,1,-375,-451.5) 将成为矩阵(1,0,0,1,-375,-451)

我在jquery的.show()之前调用这个方法...或者也许只在应用程序中一次(取决于你的情况),你可能还需要在resize事件等上调用它.

function roundCssTransformMatrix(element){
        var el = document.getElementById(element);
        el.style.transform=""; //resets the redifined matrix to allow recalculation, the original style should be defined in the class not inline.
        var mx = window.getComputedStyle(el, null); //gets the current computed style
        mx = mx.getPropertyValue("-webkit-transform") ||
             mx.getPropertyValue("-moz-transform") ||
             mx.getPropertyValue("-ms-transform") ||
             mx.getPropertyValue("-o-transform") ||
             mx.getPropertyValue("transform") || false;
        var values = mx.replace(/ |\(|\)|matrix/g,"").split(",");
        for(var v in values) { values[v]=v>4?Math.ceil(values[v]):values[v]; }

        $("#"+element).css({transform:"matrix("+values.join()+")"});

}

并称之为

roundCssTransformMatrix("MyElementDivId");
$("#MyElementDivId").show();

美不是吗？

如果您需要更新调整大小,您可以使用:

$( window ).resize(function() {
  roundCssTransformMatrix("MyElementDivId");  
});

为了实现这一点,所有父项都必须"对齐/标准化",因为如果你的实例左边有x = 10.1px的主体,并且子项是10px ..问题不会消失,因为父项有剩余的小数matrix因此,您必须将此函数应用于作为父元素的每个元素并使用transform.

你可以在这里看到这个实时脚本:https://jsbin.com/fobana/edit？html,css,js,output

Answer 5

感谢CSS示例.似乎translateX(50%)并且translateY(50%)正在计算具有小数位(例如,0.5px)的像素值,这导致子像素渲染.

对此有很多修复,但如果您想保留文本的质量,那么您现在最好的解决方案是使用-webkit-font-smoothing: subpixel-antialiased;on .md-modal来强制Chrome和Safari等webkit浏览器的呈现状态.

Answer 6

我最终通过删除这些行来解决这个问题：

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

Answer 7

我花了一段时间才找到一个我不会打扰的解决方案，所以我会在这里发布它。

对我来说，问题是孩子div拥有width和height属性的组合导致了问题。

当我更改了height另一个值时，它就起作用了！

这可能与其他答案有关，但我不想使用任何 JS 或更改转换属性来修复它。

这是一个活生生的例子：JSFIDDLE