Font looks blurry after translate in Chrome

问题:

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

EDIT 2017-05-14 The bug seems to be fixed, the fix will be introduced in Chrome 60

EDIT 2018-05-04 A fix has been merged, but the bug still appears to be present.

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.

回答1:

Problem in half of pixel.

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

It will work!

回答2:

I found out -webkit-filter: blur(0) could fix your blurry font in Chrome on Windows:

JSFiddle

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

回答3:

A suggestion from the related discussion solved the issue for me: https://stackoverflow.com/a/46117022/7375996

Using calc with some offset solved the issue in my case:

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

回答4:

Use a normalization of the transform after your animation:

Transform X/Y normalization

Or We scale the texture with zoom double, then scale down again. In some cases this cannot be applied due to other complex transformations or translations, and is not perfect.

...{
zoom:2;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}

回答5:

I tried every solution and only this is working for me (chrome 53)

dialog {
  position: fixed;
  top: 50%;
  transform: translate(0, -50%);
}