5

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

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

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

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

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

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

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

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

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

3
  • Вам может помочь это: useragentman.com/blog/2014/05/04/… Переводить на полноценный ответ мне лень) 7 дек 2016 в 14:43
  • @УмеренноУпоротаяУтка Ну, я гляну, но беглым взглядом окинув я понял, что все это я уже пробовал 7 дек 2016 в 14:48
  • @УмеренноУпоротаяУтка опасная статья - про IE хорошие вещи пишут ;)
    – A. Gusev
    11 дек 2016 в 8:47

4 ответа 4

5

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

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

В чем соль?

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

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

2

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

1
1

Тоже задался вопросом (пока искал, заметил этот же баг на это сайте при регистрации, когда всплывает окно для загрузки картинки профиля) и нашел причину: это единицы измерения. Видимо, браузер располагает блок автоматом, например, на 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 аналогичное делать, кому как удобнее.

0

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

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.