Почему transform: translate(-50%, -50%) размывает текст?

#html #css #transform

Много где я использую эту фичу, ибо удобно:

@include transform(translate(-50%, -50%));
          left: 50%;
          top: 50%;


но появилась проблема со шрифтами, они становятся размытыми 

вот С этим стилем: 



вот БЕЗ этого стиля: 



Пробовал давать translateZ(0) -не помогло

Что можете посоветовать?
Спасибо
    

Ответы

Ответ 1

Есть один метод, случайно дошел сам, когда столкнулся с той же проблемой.

Рецепт:
Добавить больший z-index анимируемому элементу и меньший z-index не анимируемому
в данном случае блоку с текстом.

В чем соль?

Соль в том, что когда у нас есть анимация/переход/трансформация, то она действует
на все слои (позиционированную html-разметку). Чтобы этого избежать нужно указать на
какой слой будет воздействие, в этом нам поможет z-index. Когда мы прописываем больший
z-index анимации, мы говорим что нам нужны изменения со слоя n и выше. Т.е слои которые
находятся под анимируемым затронуты анимацией/переходом/трансформацией не будут (Попробуйте
сделать наоборот и работать ничего не будет).

P.S Читал пару статей в интернете про аппаратное ускорение. Кстати там говорилось
о композитных слоях, но про z-index сказано не было. Но видать это очень важная вещь
как оказывается.


Ответ 2

Тоже искал решение этого вопроса, методом тыка выяснил, помогло свойство line-height: 1;


Ответ 3

Тоже задался вопросом (пока искал, заметил этот же баг на это сайте при регистрации,
когда всплывает окно для загрузки картинки профиля) и нашел причину: это единицы измерения.
Видимо, браузер располагает блок автоматом, например, на 120.5px, и из-за этого не
может нормально прорисовать. Для проверки добавлял 1px высоты блоку вручную - всё идеально.
Добавляешь 2px - снова размывается, и т.д. В Мозилле всё отлично, а вот хром такую
фигню выдает. Остается только скриптом проверять высоту блока или что-то подобное использовать:
transform: translate(0,-50.1%);
Попробовал вот такое решение JQ на одном сайте, вроде работает:

var newht=$('.modalBlock').height();
newht=($(window).height()-newht)/2;
if(newht%1!=0){
$('.modalBlock').height($('.modalBlock').height()+1);
}


При каждой отрисовке модального окна предварительно высоту обновлять тоже через JS
(если вдруг высота блока меняется и модалки разные):

$('.modalBlock').css('height','auto');


Либо, на чистом JS аналогичное делать, кому как удобнее.


Ответ 4

В моём случае размытость возникала из-за border: 1px; в блоке.