Font looks blurry after translate in Chrome

Question

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<

Answer 1

The height of the elements must be even numbers https://prnt.sc/mtxxa2

Answer 2

The only solution that worked for me:

Translates can cause blur due to result not being rounded to the nearest pixels, so rounding the div height to an even number fixes it.

We can't do it in CSS as it doesn't know yet its final height, so we have to do it after rendering. Using Jquery is a breeze:

$(window).on("load", function() {
    if($('.popup').height()%2==1) $('.popup').height( 2*Math.round($('.popup').height()/2 ) ) ;
    if($('.popup').width()%2==1) $('.popup').width( 2*Math.round($('.popup').width()/2 ) ) ;
});

Credits: https://stackoverflow.com/a/57382347/1136132

Answer 3

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

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

Answer 4

Problem in half of pixel.

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

It will work!