Шрифт выглядит размытым после перевода в Chrome

РЕДАКТИРОВАТЬ 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 без фона.

Ответы

Ответ 1

Проблема в половине пикселя.

Попробуйте: transform: translate(-50%, -51%);

Это сработает!

Ответ 2

Я узнал, что -webkit-filter: blur(0) может исправить ваш размытый шрифт в Chrome в Windows:

JSFiddle

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

Ответ 3

Предложение от связанной дискуссии решило проблему для меня: fooobar.com/questions/6427366/...

Использование calc с некоторым смещением решило проблему в моем случае:

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

Ответ 4

Используйте нормализацию преобразования после анимации:

Преобразование X/Y нормализации

Или Мы масштабируем текстуру с удвоением зума, затем снова уменьшаем масштаб. В некоторых случаях это невозможно применить из-за других сложных преобразований или переводов и не является совершенным.

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

Ответ 5

2019-04-15, все еще происходит со мной в Chrome. Обнаружено, что изменение position: fixed на absolute фиксированное:

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

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

Использование абсолютного может или не может удовлетворить ваш конкретный случай, только мои 2 цента.

Ответ 6

Я пробовал разные решения в разных, иногда пугающих комбинациях:

translate3d вместо translateY
zoom:2; transform: scale(0.5); или zoom:0.5; transform: scale(2); 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 года.

Единственное решение, которое я нашел для модалов, которое должно быть центрировано, - использовать alignment flexbox вместо 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>

Ответ 7

Я пробовал каждое решение, и только это работает для меня (chrome 53)

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

Ответ 8

Высота элементов должна быть четными числами https://prnt.sc/mtxxa2