html – 翻译后的字体在Chrome中看起来模糊

EDIT 2016-07-04(因为这个问题越来越流行)： This is a bug in Chrome.开发者是 actively working on a fix.

所以我有这个非常丑陋的窗口,以屏幕为中心的CSS：

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

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

不过,Chrome看起来像这样(字体看起来真的很模糊)：

但是就像Firefox这样：

当我删除转换规则时,文本再次看起来不错,但是它不再正确地居中.

当我去chrome：//标志并执行#disable-direct-write它看起来更好,但用户显然不会这样做,它不能解决问题.

当窗口居中的时候,我怎么能使我的字体看起来不错

我的Chrome版本是44.0.2403.155

我有一个使用WebGL渲染在背景画布上的three.js演示.当我禁用演示,问题不再发生.

JSFiddle with the background.

JSFiddle without the background.

解决方法

像素的一半问题

尝试：transform：translate(-50％,-51％);

它会工作！

原文地址：https://www.jb51.cc/html/231314.html