Размытый текст после использования CSS transform: scale(); в Chrome

Ответ 1

У меня есть эта проблема несколько раз, и, похоже, есть два способа ее устранения (показано ниже). Вы можете использовать любое из этих свойств для исправления рендеринга или обоих одновременно.

Скрытая видимость в обратном направлении устраняет проблему, поскольку она упрощает анимацию только перед объектом, тогда как состояние по умолчанию - спереди и сзади.

backface-visibility: hidden;

TranslateZ также работает, так как это взломать добавление аппаратного ускорения в анимацию.

transform: translateZ(0);

Оба этих свойства исправляют проблему, которую вы имеете, но некоторые люди также хотели бы добавить

-webkit-font-smoothing: subpixel-antialiased;

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

Ответ 2

Чтобы улучшить размытость, особенно в Chrome попробуйте сделать следующее:

transform: perspective(1px) translateZ(0);
backface-visibility: hidden;

ОБНОВЛЕНИЕ: Перспектива добавляет расстояние между пользователем и плоскостью z, что технически масштабирует объект, делая размытость "постоянной". perspective(1px) выше похож на утку, потому что мы соответствуем размытости, которую пытаемся решить. Возможно, вам повезет больше с css ниже:

transform: translateZ(0);
backface-visibility: hidden;

Ответ 3

Я обнаружил, что корректировка коэффициента масштабирования помогла незначительно.

Использование scale(1.048) over (1.05), казалось, создало лучшее приближение к размеру всего пикселя, уменьшая размытие субпикселей.

Я также использовал translateZ(0), который, похоже, настраивает шаг окончательного округления Chrome в анимации преобразования. Это плюс для моего использования onhover, потому что это увеличивает скорость и уменьшает визуальный шум. Однако для функции onclick я бы не использовал ее, потому что преобразованный шрифт не выглядел таким хрустящим.

Ответ 4

Вместо

transform: scale(1.5);

используя

zoom : 150%;

исправляет проблему размытия текста в Chrome.

Ответ 5

Сандерлы привели меня к ответу. За исключением filter: scale не существует, но filter: blur делает.

Применить следующие объявления к элементам, которые кажутся размытыми (в моем случае они были внутри преобразованного элемента):

backface-visibility: hidden;    
-webkit-filter: blur(0);

Он почти отлично работал. "Почти", потому что я использую переход и в процессе перехода элементы не выглядят идеально, но как только переход завершен, они это делают.

Ответ 6

Это должно быть ошибкой с Chrome (версия 56.0.2924.87), но ниже исправляется размытость для меня при изменении свойств css в консоли ('. 0'). Я сообщу об этом.

filter: blur(.0px)

Ответ 7

Попробовав все остальное здесь безуспешно, что окончательно исправило эту проблему для меня, удалив изменение will-change: transform; имущество. По какой-то причине это вызвало ужасно размытое масштабирование в Chrome, но не в Firefox.

Ответ 8

Я выяснил, что проблема имеет место при относительных преобразованиях. translateX (50%), масштаб (1.1) или что-то еще. при условии, что абсолютные значения всегда работают (не создает размытый текст()).

Ни одно из упомянутых здесь решений не работает, и я думаю, что пока нет решения (используя Chrome 62.0.3202.94, когда я пишу это).

В моем случае transform: translateY(-50%) translateX(-50%) вызывает размытие (я хочу центрировать диалог).

Чтобы достичь более "абсолютных" значений, мне пришлось установить десятичные значения в transform: translateY(-50.09%) translateX(-50.09%).

Примечание

Я уверен, что эти значения различаются по разным размерам экрана. Я просто хотел поделиться своим опытом, если это кому-то поможет.

Ответ 9

Попробуйте использовать zoom: 101%; для сложных конструкций, если вы не можете использовать комбинацию масштабирования и масштабирования.

Ответ 10

В моем случае следующий код вызвал размытый шрифт:

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

и просто добавив свойство масштабирования, исправил его для меня. Играйте с масштабированием, после чего работали для меня:

zoom: 97%;   

Ответ 11

Еще одно исправление, которое я только что нашел для размытых преобразований (translate3d, scaleX) в Chrome, - установить элемент как " display: inline-table ;". Кажется, в некоторых случаях происходит принудительное округление пикселей (по оси X).

Я прочитал субпиксельное позиционирование под Chrome, и разработчики не исправят это.

Ответ 12

Добавление perspective(1px) сработало для меня.

transform: scale(1.005);

в

transform: scale(1.005) perspective(1px);

Ответ 13

Я нашел намного лучшее и чистое решение:

.element{
 transform:scale(0.5) 
 transform-origin: 100% 0;
}

или

.element{
 transform:scale(0.5) 
 transform-origin: 0% 0;
}

Благодаря этому сообщению: Предотвращение размытого рендеринга с преобразованием: масштаб

Ответ 14

Ничто из вышеперечисленного не помогло мне.

Это сработало, когда я добавил перспективу

то есть из

transform: translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

я изменился на

transform: perspective(1px) translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

Ответ 15

Я исправил свой случай, добавив:

transform: perspective(-1px)

Ответ 16

ДЛЯ ХОРМЫ:

Я перепробовал все предложения здесь. Но я не работаю. Мой колледж нашел отличное решение, которое работает лучше:

Вы НЕ должны масштабироваться выше 1,0

И включите translateZ(0) в режиме наведения, но НЕ в исходное положение.

Пример:

a {
    transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transform: scale(0.8, 0.8);
}

a:hover {
    transform: translateZ(0)scale(1.0, 1.0);
}

Ответ 17

Я использовал комбинацию всех ответов, и вот что у меня получилось в итоге:

.modal .modal--transition {
  display: inline-table;
  transform: perspective(1px) scale(1) translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

Ответ 18

Для меня проблема заключалась в том, что мои элементы использовали transformStyle: preserve-3d. Я понял, что это действительно не нужно для приложения, и он устраняет его размытость.

Ответ 19

Никто из них не работал у меня. У меня была эта анимация для всплывающих окон:

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

В моем случае размытый эффект исчез после применения этого правила: -webkit-perspective: 1000;, хотя он отмечен как неиспользуемый в инспекторе Chrome.

Ответ 20

Я удалил это из своего кода - transform-style: preserve-3d; и добавили this- transform: perspective(1px) translateZ(0);

размытие ушло!

Ответ 21

В Chrome 74.0.3729.169, по состоянию на 5-25-19, похоже, нет исправления размытия, возникающего при определенных уровнях масштабирования браузера, вызванных преобразованием. Даже простой TransformY(50px) размывает элемент. Это не происходит в текущих версиях Firefox, Edge или Safari, и, похоже, не происходит при всех уровнях масштабирования.

Ответ 22

вы можете использовать css filter, чтобы исправить это.

.element {
    filter: blur(0);
}

о префиксе поставщика, сделайте это самостоятельно. -webkit-filter, -ms-filter. деталь здесь http://browser.colla.me/show/css_transformation_scale_cause_blurring

Ответ 23

Текст не будет размытым, если вы не transition transform.

Просто сделай это:

&:hover {
    transform: scale(1.1);
}

Без перехода, как transition: all.2s;

Ответ 24

Важно добавить, что эта проблема возникает, если перемещаемый элемент имеет высоту с нечетным числом пикселей. Таким образом, если вы контролируете высоту элемента, установив его на четное число, содержимое станет четким.