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


126

Похоже, что недавно было обновление 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-преобразованиях.

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


Просто зашел на сайт с помощью Firefox и IE 10, не вижу проблемы. Если это ограничено Chrome, вам, возможно, придется подождать, пока Google исправит это самостоятельно.
Nolonar 03

Я не вижу размытия ... Я использую Chrome v25 / ПК
vsync

Я столкнулся с этой проблемой и раньше, как сказал Нолонар, нам придется подождать, пока Google исправит ее.
raj_n 04

Это не решение, но я заметил, что проблема возникает у меня только при использовании CSS optimizeLegibility.
Bangkokian

Ссылка не работает.
Timothy003

Ответы:


78

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

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

backface-visibility: hidden;

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

transform: translateZ(0);

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

-webkit-font-smoothing: subpixel-antialiased;

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


12
Кажется, что все эти методы улучшают ситуацию, но я все еще не могу довести Chrome до того же уровня ясности, который я вижу в Firefox.
Майкл Мартин-Смакер

13
backface-visibility: hidden;Конечно, сработало в моем случае, в решении некоторого странного размытого движения, вызванного переходом непрозрачности, то есть. Странное движение теперь исчезло, НО оно сделало тексты в моем div навсегда размытыми.
ITWitch

14
Как предложил @ykadaru, попробуйте добавить perspective(1px)в свой transform:код, у меня это сработало в Chrome, в то время как ничто другое не решило проблему
Серж Еремеев

4
Не работает в Chrome версии 65.0.3325.162 (официальная сборка) (64-разрядная версия), запущенной в Ubuntu 17.10 с сеансом Gnome X11 (Wayland выключен)
Marecky

3
В Chrome 72 первые два параметра приводят к
размытию

24

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

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

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

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

4
Для меня это на самом деле еще хуже.
balu

1
Для меня это исправляет сбой (без этого элемент перемещается на 1 пиксель после завершения анимации, исправьте это только с помощью transform :pective (1px)!)
Серджиу

@balu проверьте мой обновленный ответ! избавьтесь от perspective(1px)собственности и посмотрите, работает ли она лучше.
ykadaru

16

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

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

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


1
Это единственный подход, который у меня сработал. Другие подходы (обратная видимость, добавление фильтров, перспектива и старый добрый translateZ) только усугубили ситуацию. Попробуйте масштабировать до целых пикселей. Например, перейдите с 14 пикселей на 16 пикселей, используя масштабный коэффициент 1,1429 (16/14).
Уго дер Хенгридж

1
Работали у меня без translateZ(0), поменяли только 1.05на1.048
А. Волг

15

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


Почему кто-то голосовал против этого? Я не понимаю ... :( Это вполне актуальная проблема в некоторых версиях Chrome, и кажется, что "will-change" в целом все еще довольно новый и, вероятно, не должен использоваться. Для получения дополнительной информации см. Greensock .com / will-change
Дэн

Была такая же проблема. Спасибо за публикацию.
raine

У меня была та же проблема с рендерингом компонентов дизайна материалов в Chrome 75. Устранение стиля CSS с изменением воли.
Роб

Подтверждено в Chrome 79
Фариш Виджаярангам

1
У меня наоборот, добавление will-change: transform;немного исправляет проблему
Якуб Завислак

14

Вместо того

transform: scale(1.5);

с помощью

zoom : 150%;

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


Это может помочь, но также вызывает другие проблемы, например, иногда
Кевин

1
не уверен, почему голос против. Когда я применил это к флажкам, это сработало намного лучше, чем transform: scale ()
Брайан МакКолл

2
Для firefox используйте transform: scale () работает как шарм, без размытия. Вам придется работать над обнаружением браузера и действовать соответственно для Chrome / Safari и Firefox.
Найшил Вердан

15
Другая проблема заключается в том, что масштабирование, похоже, не работает со свойством перехода, поэтому его нельзя использовать для анимации CSS
ericgrosse

3
Он работает и устраняет размытие, но также меняет положение элементов.
user1156544 07

8

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

filter: blur(.0px)

1
Получили ли вы что-нибудь с отчетом об ошибке?
Diazole

боюсь, я даже не помню, куда я отправил ошибку. Хотя так и сделал.
Andyw

Я использую Bootstrap (4.4.1), Chrome (80.0.3987.132), Windows 10 (с масштабированием на 125%), и у меня размытые тексты в раскрывающемся меню. Меню позиционируется с использованием, transform: translate3d();и это, кажется, вызывает проблему. Ни одно из предложенных решений не помогло мне. Кроме / вроде этого. Это работает только в том случае, если я сначала установлю некоторое положительное значение (например, blur(0.1px)), а затем изменю на blur(0px). Поскольку элемент является динамическим и также требует динамического (JS) решения, ... это отстой: \
akinuri

7

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

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

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

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


-webkit-filter: blur(0);только у меня работает. backface-visibility: hidden;размывает мой элемент, когда я потом сбрасываю масштабирование.
Кай Хартманн,

это забавно для Chrome ... если я установил, blur(0px);это не исправит. но если я это сделаю, blur(1px);а затем нажмите клавишу со стрелкой вниз, чтобы blur(0px);это выглядело правильно. Ушел на обновление страницы / независимо от того, что я пишу в CSS,
Том Роггеро

1
@TomRoggero Это звучит менее специфично для значения свойства размытия и больше о том, когда выполняется перерисовка макета. Вы можете поэкспериментировать с принудительной перерисовкой элемента с помощью JavaScript после некоторой задержки.
Gajus

5

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

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

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

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

НОТА

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


Я столкнулся с той же проблемой, делая то же самое. Я центрировал модальное окно с помощью translate3d (-50%, -50%, 0). В моем случае я увеличил значения до -50,048%, и это выглядит идеально.
Крис Гутьеррес


4

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

transform: scale(1.005);

в

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

3

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


Обратите внимание, что zoomэто не определено ни одним веб-стандартом и не поддерживается firefox caniuse.com/#feat=css-zoom
Boltgolt

3

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

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

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

zoom: 97%;   

4
Нет поддержки firefox дляzoom
Dustin Poissant

3

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

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


3

Обновление 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 должна уменьшить или исключить необходимость использования преобразования для позиционирования. Это также может относиться к веб-сайтам фиксированной ширины, а также к текучим.


При использовании трансляции ожидается размытость, потому что элемент может оказаться на половине пикселя . Есть в настоящее время лучшие альтернативы для центрирования вещей: образец Flexbox , сетка образец
Timothy003

Единственный протестированный мной браузер, у которого, похоже, есть проблема с центром преобразования, - это Chrome, все остальное кажется кристально чистым. Я оглянулся назад и обнаружил, что эта проблема существует уже 7 лет! Тем не менее есть много способов снять шкуру с кошки, и, как вы говорите, это даже больше не требуется.
SJacks

это невероятно, но filter: blur (-0.1px); помог мне !!. как, черт возьми, это работает ??
jt3k

3

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

.element {
  display: table
}

2
безумно, но это работает; Chrome - это, по-видимому, новый IE
Артур

оооо, господин! ик работает! я полагаю, что "исправить" ширину таблицы в PX не удалось получить ширину с
полупикселем

3

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

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

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


2

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

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


У меня работает, и еще он отмечен как неиспользованный. Я также добавил, will-change: transform;что исправляет размытие границ элементов. Любые другие ответы не помогли мне.
Якуб Завислак,

1

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

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

то есть от

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

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

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


perspective(1px)Мне стало еще хуже от добавления :(
balu

1

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

transform: perspective(-1px)

Это для меня просто удалило scale()результат преобразования
jpenna

1

ДЛЯ 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);
}

1

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

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

1

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

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

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

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

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

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


1

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

 transform-origin: 50% 50%;

вот этот

 transform-origin: 51% 51%;

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


0

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


0

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

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


0

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


Вот что случилось с моим. Я не могу избавиться от этого эффекта размытия. Одно из эффективных решений - установить эти свойства: top: 0, bottom: 0, left: 0; right: 0; margin: autoно тогда контейнер займет все пространство, которое может (оно должно быть шириной), поэтому это не сработает в случае, когда контент должен определять, насколько большим будет контейнер.
kwiat1990

0

Решить только 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);
    }
})}

0

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


-1

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

.element {
    filter: blur(0);
}

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



Он должен быть размытым в соответствии с указанным в ответе URL-адресом.
Сардток,

-1

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

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

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.