在Chrome中翻译后，字体看起来模糊 [英] Font looks blurry after translate in Chrome

问题描述

EDIT 2016-07-04 （由于这个问题越来越受欢迎）：

但在Firefox上这样：

当我删除 transform 规则时，

当我转到 chrome：// flags 并执行时＃disable-direct-write 它看起来更好，但用户显然不会这样做，它不能解决问题。

如何使我的字体看起来很漂亮，同时仍以窗口为中心？

我的Chrome版本是 44.0.2403.155

我有一个使用WebGL渲染在背景画布上的 three.js 演示。当我停用演示时，问题不再出现。

JSFiddle的背景。

JSFiddle无背景。

尝试： transform：translate（-50％，-51％）;

它会工作！

EDIT 2016-07-04(Since this question is getting popular): This is a bug in Chrome. Developers are actively working on a fix.

So I have this very ugly-looking window that is centered on the screen by this CSS:

.popup
{
   position: fixed;
   top: 0;
   bottom: 0;

   transform: translate(-50%, -50%);
}

However, it looks like this on Chrome (the font looks really blurry):

But like this on Firefox:

When I remove the transform rule, the text looks nice and crispy again, but then it's no longer correctly centered.

When I go to chrome://flags and execute #disable-direct-write it looks nicer, but users are obviously not going to do that and it doesn't solve the problem.

How can I make my font look nice while still having the window centered?

My chrome version is 44.0.2403.155

I have a three.js demo using WebGL that renders on a background canvas. When I disable the demo, the problem no longer occurs.

JSFiddle with the background.

JSFiddle without the background.

解决方案

Problem in half of pixel.

Try: transform: translate(-50%, -51%);

It will work!

这篇关于在Chrome中翻译后，字体看起来模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！