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

First of all add overflow: hiffffden to the parent element of the modal, if that's not enough add this to modal's style : display: contents Happy coding, love from Mauritania

Answer 2

A suggestion from a 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));

Answer 3

2019-04-15, still happening to me in Chrome. Found that changing position: fixed to absolute fixed it:

.popup
{
   position: absolute;  <-- just like that
   top: 50%;
   left: 50%;

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

Using absolute may or may not suit your particular case, just my 2 cents.

Answer 4

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%);
}

Answer 5

I've tried different solutions in different, sometimes scary, combinations:

• translate3d instead of translateY
• zoom:2; transform: scale(0.5); or 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;

none of them work in july 2019.

The only solution i found for modals, that should be centered - to use a flexbox aligment instead of transform: translate.

.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 6

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);
}