Похоже, что недавно было обновление 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-преобразованиях.
Любые идеи будут оценены, спасибо!
google-chrome
css
webkit
transform
css-animations
Райан О'Рурк
источник
источник
Ответы:
У меня была эта проблема несколько раз, и, кажется, есть 2 способа ее исправить (показано ниже). Вы можете использовать любое из этих свойств для исправления рендеринга или оба одновременно.
Скрытая видимость задней стороны устраняет проблему, поскольку упрощает анимацию до передней части объекта, тогда как состояние по умолчанию - передняя и задняя.
TranslateZ также работает, поскольку это средство для аппаратного ускорения анимации.
Оба эти свойства решают возникшую у вас проблему, но некоторым людям также нравится добавлять
к их анимированному объекту. Я считаю, что он может изменить отображение веб-шрифта, но не стесняйтесь экспериментировать и с этим методом.
источник
backface-visibility: hidden;
Конечно, сработало в моем случае, в решении некоторого странного размытого движения, вызванного переходом непрозрачности, то есть. Странное движение теперь исчезло, НО оно сделало тексты в моем div навсегда размытыми.perspective(1px)
в свойtransform:
код, у меня это сработало в Chrome, в то время как ничто другое не решило проблемуДля улучшения размытости, особенно. в Chrome попробуйте сделать это:
ОБНОВЛЕНИЕ: перспектива добавляет расстояние между пользователем и z-плоскостью, которая технически масштабирует объект, делая размытость «постоянной».
perspective(1px)
Выше, как утка-лента , потому что мы соответствие расплывчатости мы пытаемся решить. Возможно, вам повезет больше с css ниже:источник
perspective(1px)
собственности и посмотрите, работает ли она лучше.Я обнаружил, что регулировка коэффициента масштабирования немного помогла.
Использование
scale(1.048)
over,(1.05)
казалось, генерировало лучшее приближение к размеру шрифта в весь пиксель, уменьшая размытие субпикселей.Я также использовал
translateZ(0)
это, похоже, для настройки последнего шага округления Chrome в анимации преобразования. Это плюс для моего использования onhover, потому что он увеличивает скорость и снижает визуальный шум. Однако для функции onclick я бы не стал ее использовать, потому что преобразованный шрифт не выглядит таким четким.источник
translateZ(0)
, поменяли только1.05
на1.048
Перепробовав все остальное здесь не повезло, то , что , наконец , фиксированный этот вопрос для меня было удаление в
will-change: transform;
собственность. По какой-то причине это вызвало ужасно размытое масштабирование в Chrome, но не в Firefox.источник
will-change: transform;
немного исправляет проблемуВместо того
с помощью
устраняет проблему размытия текста в Chrome.
источник
Это, должно быть, ошибка Chrome (версия 56.0.2924.87), но ниже я исправляю размытость при изменении свойств css в консоли ('. 0'). Я сообщу об этом.
источник
transform: translate3d();
и это, кажется, вызывает проблему. Ни одно из предложенных решений не помогло мне. Кроме / вроде этого. Это работает только в том случае, если я сначала установлю некоторое положительное значение (например,blur(0.1px)
), а затем изменю наblur(0px)
. Поскольку элемент является динамическим и также требует динамического (JS) решения, ... это отстой: \Сандерлс подвел меня к ответу. Except
filter: scale
не существует, ноfilter: blur
есть.Примените следующие объявления к элементам, которые кажутся размытыми (в моем случае они находились внутри преобразованного элемента):
Работало почти идеально. « Почти », потому что я использую переход, и во время перехода элементы выглядят неидеально, но когда переход выполнен, они выглядят идеально.
источник
-webkit-filter: blur(0);
только у меня работает.backface-visibility: hidden;
размывает мой элемент, когда я потом сбрасываю масштабирование.blur(0px);
это не исправит. но если я это сделаю,blur(1px);
а затем нажмите клавишу со стрелкой вниз, чтобыblur(0px);
это выглядело правильно. Ушел на обновление страницы / независимо от того, что я пишу в CSS,Я обнаружил, что проблема возникает в любом случае с относительными преобразованиями. translateX (50%), scale (1.1) или что-то еще. предоставление абсолютных значений всегда работает (не создает размытого текста (ures)).
Ни одно из упомянутых здесь решений не сработало, и я думаю, что решения пока нет (с использованием Chrome 62.0.3202.94, пока я пишу это).
В моем случае
transform: translateY(-50%) translateX(-50%)
вызывает размытие (я хочу центрировать диалог).Чтобы получить немного больше «абсолютных» значений, мне пришлось установить десятичные значения
transform: translateY(-50.09%) translateX(-50.09%)
.НОТА
Я совершенно уверен, что эти значения различаются для разных размеров экрана. Я просто хотел поделиться своим опытом, если это кому-то поможет.
источник
Я нашел гораздо лучшее и чистое решение:
или
Благодаря этому сообщению: Предотвращение размытого рендеринга с помощью transform: scale
источник
Добавление
perspective(1px)
сработало для меня.в
источник
Попробуйте использовать
zoom: 101%;
для сложных дизайнов, когда вы не можете использовать комбинацию увеличения + масштаба.источник
zoom
это не определено ни одним веб-стандартом и не поддерживается firefox caniuse.com/#feat=css-zoomВ моем случае следующий код вызвал размытый шрифт:
и просто добавление свойства масштабирования исправило это для меня. Поиграйте с масштабированием, у меня сработало следующее:
источник
zoom
Еще одно исправление, которое я только что нашел для размытых преобразований (translate3d, scaleX) в Chrome, - это установить элемент как « display: inline-table ;». Кажется, что в некоторых случаях (по оси X) заставляет округлять пиксели.
Я читал, что субпиксельное позиционирование в Chrome было предназначено, и разработчики его не исправят.
источник
Обновление 2019
г. Ошибка отображения Chrome все еще не исправлена, и хотя посетители не виноваты, ни одно из предложений, предлагаемых на этом веб-сайте в целом, не помогает решить эту проблему. Могу согласиться с тем, что я тщетно пробовал каждый из них: только 1 подходит близко, и это правило css: filter: blur (0); который устраняет смещение контейнера на 1 пиксель, но не устраняет ошибку размытого отображения самого контейнера и любого содержимого, которое он может иметь.
Вот какова реальность: буквально нет решения этой проблемы, поэтому вот как можно обойти гибкие веб-сайты.
СЛУЧАЙ В
настоящее время я разрабатываю гибкий веб-сайт и имею 3 блока, все сосредоточены с эффектами наведения и разделяю процентные значения как по ширине, так и по положению. Ошибка Chrome возникает в центральном контейнере, который установлен влево: 50%; и преобразовать: translateX (-50%); обычная обстановка.
ПРИМЕР: Сначала HTML ...
Вот CSS, в котором возникает ошибка Chrome ...
Вот исправленный css ...
Ошибка скрипта: https://jsfiddle.net/m9bgrunx/2/
Исправленная скрипка: https://jsfiddle.net/uoc6e2dm/2/
Как видите, небольшая доработка CSS должна уменьшить или исключить необходимость использования преобразования для позиционирования. Это также может относиться к веб-сайтам фиксированной ширины, а также к текучим.
источник
У меня такая же проблема. Я исправил это, используя:
источник
Мое решение было:
дисплей: начальный;
Тогда он был хрустящим и острым
источник
Ничего из вышеперечисленного не помогло мне. У меня была такая анимация для всплывающих окон:
В моем случае размытый эффект исчез после применения этого правила:
-webkit-perspective: 1000;
даже если он отмечен как неиспользуемый в инспекторе Chrome.источник
will-change: transform;
что исправляет размытие границ элементов. Любые другие ответы не помогли мне.У меня ничего из вышеперечисленного не сработало.
Это сработало, когда я добавил перспективу
то есть от
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)
Мне стало еще хуже от добавления :(Я исправил свой случай, добавив:
источник
scale()
результат преобразованияДЛЯ CHORME:
Я попробовал все предложения здесь. Но не работал. Мой колледж нашел отличное решение, которое работает лучше:
Вы НЕ должны масштабироваться выше 1.0
И включить
translateZ(0)
в наведение, но НЕ в исходное положение / без наведения.Пример:
источник
Я использовал комбинацию всех ответов, и в итоге у меня сработало следующее:
источник
Я столкнулся с проблемой размытого текста в Chrome, но не в Firefox, когда я использовал
transform: translate(-50%,-50%)
.Что ж, я действительно пробовал много обходных путей, например:
Мне все это не помогло.
Наконец, я выровнял высоту и ширину элемента. Это решило проблему для меня !!!
Примечание. Это может зависеть от варианта использования. Но попробовать обязательно стоит!
источник
Я пробовал много примеров из этих ответов, к сожалению, ничего не помогло для Chrome,
Version 81.0.4044.138
я вместо этого добавил к преобразовывающему элементувот этот
это помогает мне
источник
Для меня проблема заключалась в том, что мои элементы использовали
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, и, похоже, это не происходит на всех уровнях масштабирования.источник
top: 0, bottom: 0, left: 0; right: 0; margin: auto
но тогда контейнер займет все пространство, которое может (оно должно быть шириной), поэтому это не сработает в случае, когда контент должен определять, насколько большим будет контейнер.Решить только css будет сложно.
Итак, я решил это с помощью jquery.
Это мой CSS.
и это мой jquery.
источник
Просто чтобы добавить к повальному увлечению исправлениями, помещение {border: 1px solid # ???} вокруг плохо выглядящего объекта решает проблему для меня. Если у вас стабильный цвет фона, подумайте и об этом. Это так глупо, что никто не подумал упомянуть, я думаю, ага.
источник
вы можете использовать CSS,
filter
чтобы исправить это.насчет префикса вендора, пожалуйста, сделайте это самостоятельно.
-webkit-filter
,-ms-filter
. подробности здесь http://browser.colla.me/show/css_transformation_scale_cause_blurringисточник
filter: scale
согласно developer.mozilla.org/en/docs/Web/CSS/filterТекст не будет размыто , если вы не
transition
transform
.Просто сделай это:
Без перехода вроде
transition: all .2s;
источник