在Chrome中翻译后,字体看起来很模糊

Question

编辑2016-07-04(因为这个问题越来越受欢迎):这是Chrome中的一个错误.开发人员正积极致力于修复.

编辑2017-05-14该错误似乎已修复,修复程序将在Chrome 60中引入

编辑2018-05-04修复已合并,但该错误仍然存​​在.

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

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

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

但是,它在Chrome上看起来像这样(字体看起来很模糊):

但是这样在Firefox上:

当我删除transform规则时,文本看起来又漂亮又松脆,但它不再正确居中.

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

如何在让窗口居中的同时让我的字体看起来很漂亮？

我的Chrome版本是 44.0.2403.155

我有一个three.js使用WebGL 的演示,它在背景画布上呈现.当我禁用演示时,问题不再出现.

JSFiddle的背景.

没有背景的JSFiddle.

Answer 1

我尝试了不同的、有时是可怕的组合中的不同解决方案：

• translate3d 代替 translateY
• zoom:2; transform: scale(0.5); 或者 zoom:0.5; transform: scale(2);
• transform: translate(calc(-50% + 0.5px), calc(-50% + 0.5px));
• -webkit-filter: blur(0);
• perspective: 1000px
• scale(1.0, 1.0)
• -webkit-font-smoothing: subpixel-antialiased;

他们都没有在 2019 年 7 月工作。

我为模态找到的唯一解决方案，应该居中 - 使用 flexbox 对齐而不是转换：平移。

.modal__container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}

  .modal {
    box-sizing: border-box;
    max-width: 80%;
    max-height: 80%;
    padding: 20px;
    overflow-y: auto;
    background: #fff;
  }

<div class="modal__container">
  <div class="modal">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

Answer 2

相关讨论中的一个建议为我解决了这个问题：https : //stackoverflow.com/a/46117022/7375996

在某些情况下使用带偏移量的calc解决了我的问题：

transform: translate(calc(-50% + 0.5px), calc(-50% + 0.5px));

Answer 3

一半像素的问题.

尝试: transform: translate(-50%, -51%);

它会工作!

Answer 4

我发现-webkit-filter: blur(0)可以修复 Windows 上 Chrome 中模糊的字体：

JSFiddle

#projectPopup {
    ...
    -webkit-filter: blur(0);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}