CSS Chrome 字体显得模糊
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27385126/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chrome Font appears Blurry
提问by D-W
It's doing my eyes in!
它正在做我的眼睛！
looks fine in IE and Firefox
在 IE 和 Firefox 中看起来不错
Chrome(Above)
铬（上）
Running version 39 of chrome, only appears blurry in a modal box, does not make any difference if I change the font family.
运行版本 39 的 chrome，仅在模式框中显得模糊，如果我更改字体系列，则没有任何区别。
This is the CSS (for label "Start") the browser renders the following
这是浏览器呈现的 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;
Is it the browser or CSS?
是浏览器还是CSS？
--UPDATE---
- 更新 - -
Ok looks like its this CSS
好的看起来像这个 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%);
}
However if I take it out my modal no longer centres?
但是，如果我将其取出，我的模态不再居中？
回答by arjansmeets
I fixed this issue by subtracting 0.5px from the value of the Y-axis. So insteadof doing:
我通过从 Y 轴的值中减去 0.5px 解决了这个问题。所以，而不是做：
transform: translateX(-50%) translateY(-50%);
I did this:
我这样做了：
transform: translateX(-50%) translateY(calc(-50% - .5px));
This solved it for me and I find this a cleaner solution then fiddling around with the percentage or using Javascript.
这为我解决了它，我发现这是一个更清洁的解决方案，然后摆弄百分比或使用 Javascript。
回答by Iman Mohamadi
I experienced the same issue on chrome after applying translate transform to one of my elements. It seems to be a bug on chrome. The only thing that worked for me was this:
将翻译变换应用于我的元素之一后，我在 chrome 上遇到了同样的问题。这似乎是 chrome 上的一个错误。唯一对我有用的是：
#the_element_that_you_applied_translate_to {
-webkit-filter: blur(0.000001px);
}
An Other solution can be turning smooth font rendering on:
其他解决方案可以打开平滑字体渲染：
#the_element_that_you_applied_translate_to {
-webkit-font-smoothing: antialiased;
}
回答by JSuar
This fiddle tests out a few different solutionsfrom:
- 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/
- CSS 过渡效果使图像模糊/移动图像 1px，在 Chrome 中？
- WebKit：带有 css scale + translate3d 的模糊文本
- http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/
Test Output
测试输出
Fix 0
修复 0
-webkit-transform: translateZ(0);
transform: translateZ(0);
Fix 3
修复 3
-webkit-transform: translate3d(0,0,0) !important;
transform: translate3d(0,0,0) !important;
回答by Miguel
The only correct way to solve this:
解决这个问题的唯一正确方法：
This problem arises from the fact of using % values to align the divs using css transforms. This results in decimals subpixel values, which your screen cannot render correctly. The solution is to normalize the resulting transformation matrix.
这个问题源于使用 % 值使用 css 转换对齐 div 的事实。这会导致小数子像素值，您的屏幕无法正确呈现。解决方案是对生成的变换矩阵进行归一化。
Might work better for fixed divs that don′t do transforming animation. But if you do animate you could use a after end callback to this function to correct the final state.
对于不进行转换动画的固定 div 可能会更好。但是如果你做动画，你可以使用这个函数的 after end 回调来纠正最终状态。
So:matrix (1,0,0,1,-375,-451.5) would becomematrix (1,0,0,1,-375,-451)
所以：矩阵 (1,0,0,1,-375, -451.5) 将变成矩阵 (1,0,0,1, -375, -451)
I call this method before the .show() of jquery... Or maybe just once in the application ( depends on your case) , you might need to also call this on the resize event etc..
我在 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()+")"});
}
and call it
并称之为
roundCssTransformMatrix("MyElementDivId");
$("#MyElementDivId").show();
Beautiful isn't it?
美丽是不是？
If you need to update on resize you could do it with:
如果您需要更新调整大小，您可以这样做：
$( window ).resize(function() {
roundCssTransformMatrix("MyElementDivId");
});
For this to work, all the parent must "be aligned / normalized" because if you by instance have the body with x=10.1px left, and the child is 10px .. the issue wont disapear because of the parent having residual decimals on their matrix So you must apply this function to the each element that is a parent and uses transform.
为此，所有父级都必须“对齐/规范化”，因为如果您的身体左侧 x=10.1px，而子级为 10px .. 问题不会消失，因为父级上有剩余小数点matrix 因此，您必须将此函数应用于作为父项并使用变换的每个元素。
You can see this live script here: https://jsbin.com/fobana/edit?html,css,js,output
你可以在这里看到这个实时脚本：https: //jsbin.com/fobana/edit?html,css,js,output
回答by BurpmanJunior
Thanks for the CSS example. It seems translateX(50%)and translateY(50%)are calculating a pixel value with a decimal place (eg, 0.5px) which causes subpixel rendering.
感谢您的 CSS 示例。它似乎translateX(50%)并且translateY(50%)正在计算带有小数位（例如，0.5px）的像素值，这会导致子像素渲染。
There are many fixes for this but if you want to retain the quality of the text, your best solution right now is to use -webkit-font-smoothing: subpixel-antialiased;on .md-modalto force the render state for webkit browsers like Chrome and Safari.
对此有很多修复，但是如果您想保留文本的质量，您现在最好的解决方案是使用-webkit-font-smoothing: subpixel-antialiased;on.md-modal来强制 Chrome 和 Safari 等 webkit 浏览器的渲染状态。
回答by Airton Gessner
It took me a while to find a solution that I wouldn't bother using, so I'll post it here.
我花了一段时间才找到一个我不会打扰的解决方案，所以我会在这里发布它。
The problem for me was that the child divhad widthand heightproperties with a combination that caused the problem.
对我来说，问题是孩子div拥有width和height属性的组合导致了问题。
As I changed the heightfor another value, it just worked!
当我更改了height另一个值时，它就起作用了！
This probably has to do with the other answers, but I didn't want to use any JS or change the transform property to fix it.
这可能与其他答案有关，但我不想使用任何 JS 或更改转换属性来修复它。
Here is a live example: JSFIDDLE
这是一个活生生的例子：JSFIDDLE
回答by Jezen Thomas
I ended up fixing this by removing these lines:
我最终通过删除这些行来解决这个问题：
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
回答by Du?an
For modal boxes, this css will help:
对于模态框，此 css 将有所帮助：
-webkit-transform: translate3d(-50%, -51%, 0);
-moz-transform: translate3d(-50%, -51%, 0);
transform: translate3d(-50%, -51%, 0);
Instead of placing Y axis at 50%, make it 51%. This helps in my cse. If you have a different positioning, play around, but usually 1% up/down fixes blurry content.
不要将 Y 轴置于 50%，而是将其设为 51%。这有助于我的 cse。如果您有不同的定位，请尝试一下，但通常向上/向下 1% 会修复模糊的内容。
回答by MarkoMarkovic
If you want to center something, better use flexbox. It will help you position without having blurred text.
如果你想居中一些东西，最好使用 flexbox。它将帮助您定位而不会模糊文本。
Add this to parent divof that element you want to center:
将此添加到要居中的该元素的父 div：
display: flex;
justify-content: center;
align-items: center;
Hope this helps.
希望这可以帮助。
回答by Coffee bean
Seems Chrome 78 still has this bug https://bugs.chromium.org/p/chromium/issues/detail?id=521364.
似乎 Chrome 78 仍然有这个错误https://bugs.chromium.org/p/chromium/issues/detail?id=521364。
Building upon previous answers, I found the CSS below gave me the sharpest display on a translated modal:
基于以前的答案，我发现下面的 CSS 为我提供了最清晰的翻译模式显示：
transform: translate(calc(-50% - .4px), calc(-50% - .4px));
EDIT:For IE11 compatibility:
编辑：对于 IE11 兼容性：
transform: translateX(-50%) translateX(-0.4px) translateY(-50%) translateY(-0.4px);
