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

Похоже, что недавно было обновление Google Chrome, которое вызывает размытый текст после выполнения transform: scale(). В частности, я делаю это:

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

Если вы посетите http://rourkery.com в Chrome, вы должны увидеть проблему в основной текстовой области. Раньше он не делал этого и, похоже, не влияет на другие браузеры webkit (например, Safari). Были и другие сообщения о людях, испытывающих аналогичную проблему с 3D-преобразованиями, но они не могут найти ничего о таких 2D-преобразованиях.

Любые идеи будут оценены, спасибо!

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

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

backface-visibility: hidden;

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

transform: translateZ(0);

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

-webkit-font-smoothing: subpixel-antialiased;

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

Для улучшения размытости, особенно. в Chrome попробуйте сделать это:

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

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

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

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

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

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

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

Вместо того

transform: scale(1.5);

с помощью

zoom : 150%;

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

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

filter: blur(.0px)

Сандерлс подвел меня к ответу. Except filter: scaleне существует, но filter: blurесть.

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

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

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

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

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

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

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

НОТА

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

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

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

или

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

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

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

transform: scale(1.005);

в

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

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

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

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

и просто добавление свойства масштабирования исправило это для меня. Поиграйте с масштабированием, у меня сработало следующее:

zoom: 97%;   

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

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

Обновление 2019
г. Ошибка отображения Chrome все еще не исправлена, и хотя посетители не виноваты, ни одно из предложений, предлагаемых на этом веб-сайте в целом, не помогает решить эту проблему. Могу согласиться с тем, что я тщетно пробовал каждый из них: только 1 подходит близко, и это правило css: filter: blur (0); который устраняет смещение контейнера на 1 пиксель, но не устраняет ошибку размытого отображения самого контейнера и любого содержимого, которое он может иметь.

Вот какова реальность: буквально нет решения этой проблемы, поэтому вот как можно обойти гибкие веб-сайты.

СЛУЧАЙ В
настоящее время я разрабатываю гибкий веб-сайт и имею 3 блока, все сосредоточены с эффектами наведения и разделяю процентные значения как по ширине, так и по положению. Ошибка Chrome возникает в центральном контейнере, который установлен влево: 50%; и преобразовать: translateX (-50%); обычная обстановка.

ПРИМЕР: Сначала HTML ...

<div id="box1" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box2" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box3" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

Вот CSS, в котором возникает ошибка Chrome ...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:50%; transform:translateX(-50%);} /* Bugged */
#box3 {right:5%;}

Вот исправленный css ...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:37%;} /* Fixed */
#box3 {right:5%;}

Ошибка скрипта: https://jsfiddle.net/m9bgrunx/2/
Исправленная скрипка: https://jsfiddle.net/uoc6e2dm/2/

Как видите, небольшая доработка CSS должна уменьшить или исключить необходимость использования преобразования для позиционирования. Это также может относиться к веб-сайтам фиксированной ширины, а также к текучим.

У меня такая же проблема. Я исправил это, используя:

.element {
  display: table
}

Мое решение было:

дисплей: начальный;

Тогда он был хрустящим и острым

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

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

У меня ничего из вышеперечисленного не сработало.

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

то есть от

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

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

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

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

transform: perspective(-1px)

ДЛЯ CHORME:

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

Вы НЕ должны масштабироваться выше 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);
}

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

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

Я столкнулся с проблемой размытого текста в Chrome, но не в Firefox, когда я использовал transform: translate(-50%,-50%).

Что ж, я действительно пробовал много обходных путей, например:

transform: perspective(1px);

filter: blur(0);

transform: translateZ(0);

backface-visibility: hidden;

Мне все это не помогло.

Наконец, я выровнял высоту и ширину элемента. Это решило проблему для меня !!!

Примечание. Это может зависеть от варианта использования. Но попробовать обязательно стоит!

Я пробовал много примеров из этих ответов, к сожалению, ничего не помогло для Chrome, Version 81.0.4044.138 я вместо этого добавил к преобразовывающему элементу

 transform-origin: 50% 50%;

вот этот

 transform-origin: 51% 51%;

это помогает мне

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

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

пятно исчезло!

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

Решить только css будет сложно.

Итак, я решил это с помощью jquery.

Это мой CSS.

.trY {
   top: 50%;
   transform: translateY(-50%);
}

.trX {
   left: 50%;
   transform: translateX(-50%);
}

.trXY {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

и это мой jquery.

function tr_init() {
$(".trY, .trX, .trXY").each(function () {
    if ($(this).outerWidth() % 2 != 0) {
        var fixed_width = Math.ceil($(this).outerWidth() / 2) * 2;
        $(this).css("width", fixed_width);
    }
    if ($(this).outerHeight() % 2 != 0) {
        var fixed_height = Math.ceil($(this).outerHeight() / 2) * 2;
        $(this).css("height", fixed_height);
    }
})}

Просто чтобы добавить к повальному увлечению исправлениями, помещение {border: 1px solid # ???} вокруг плохо выглядящего объекта решает проблему для меня. Если у вас стабильный цвет фона, подумайте и об этом. Это так глупо, что никто не подумал упомянуть, я думаю, ага.

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

.element {
    filter: blur(0);
}

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

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

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

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

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