CSS3 Transform, вызывающий изменение текста в Safari и Firefox Mac Yosemite

Ответ 1

Хорошо!

После недели тестирования, удаления и добавления правил CSS я наконец нашел решение, которое исправило мою проблему. Первоначально у меня была эта проблема как в Firefox 39, так и в Safari 9, но Firefox загадочно фиксировал себя последним обновлением. Однако Safari этого не сделал. Проблема связана с 3D-рендерингом элементов на странице. Элемент, который я пытался масштабировать, должен был быть преобразован в 3D-контекст, мерцающие элементы на странице, переключаемые между 2D и 3D, как объяснил @Woodrow-Barlow в других ответах.

Добавив

-webkit-transform: translate3d(0, 0, 0);

для мерцающих элементов, и, таким образом, они отображают их в 3D при загрузке страницы, им больше не нужно было переключаться!

РЕДАКТИРОВАТЬ 1. Для людей, у которых есть эта проблема в других браузерах, посмотрите свойство CSS "will-change": https://dev.opera.com/articles/css-will-change-property/

Ответ 2

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

В современных браузерах, работающих на компьютере с выделенным графическим процессором (процессор для рендеринга графики), браузер иногда переносит задачу рендеринга веб-страницы с вашего процессора ( "нормального" процессора) на GPU. У каждого процессора и графического процессора есть свои сильные и слабые стороны. Характер GPU заключается в том, что он может эффективно выполнять трехмерные преобразования, но может не иметь возможности отображать простой текст так же остро, как это делает CPU.

Эффект зависания использует преобразование, которое ваш браузер счел нужным для рендеринга графического процессора с аппаратным ускорением (скорее всего, вызвано преобразованием scale(1.1)), и поэтому он временно переключил рендеринг на графический процессор, в то время как анимация/переход имеет место. После завершения анимации процессор снова берет на себя рендеринг. Из-за различных стратегий рендеринга, используемых различными аппаратными средствами, текст выглядит по-другому (менее четкий), в то время как графический процессор отвечает за работу.

К сожалению, у нас пока нет явного контроля аппаратного ускорения с помощью CSS - браузер устанавливает это, когда захочет. Однако мы можем установить некоторые свойства, которые, как мы подозреваем, поместит браузер в аппаратный ускоренный режим графического процессора. Теория здесь заключается в том, что мы будем держать браузер в режиме GPU, даже если анимация не происходит, поэтому мы не видим "мерцания".

В этой стратегии есть несколько недостатков: пользователи, посетившие ваш сайт, будут немного увеличивать использование ОЗУ, пока ваша страница открыта, а пользователи мобильных/переносных компьютеров будут испытывать немного повышенный расход батареи. На устройствах, у которых нет выделенного графического процессора, аппаратное ускорение не будет запущено (но опять же, эти устройства не будут видеть "мерцание", которое вы видите в любом случае).

Похоже, вы уже пытались сделать это, добавив свойство scale(1.0) к не зависающему элементу - лучше всего предположить, что ваш браузер получил "умный" и обнаружил, что это правило ничего не делает и проигнорировал это. Наиболее надежным способом запуска аппаратного ускорения обычно является преобразование на оси Z. Попробуйте изменить свое преобразование на следующее:

@include transform(scale(1.00001), translateZ(0.00001));

Вместо использования значений "1" и "0" я использую бесконечно близкие значения; надеюсь, это не позволит браузеру стать "умным" и игнорировать правило.

Я предполагаю, что ваш Sass включает в себя префикс поставщика. Дважды проверьте, что конечный вывод включает в себя не только -webkit-transform: и -moz-transform:, но также содержит синтаксис без префикса transform:. Если вы хотите быть уверенным (для целей отладки), просто введите их вручную:

.usp .icon {
  transform: scale(1.00001), translateZ(0.00001);
  -webkit-transform: scale(1.00001), translateZ(0.00001);
  -moz-transform: scale(1.00001), translateZ(0.00001);
}

В конце концов, у меня не было никаких мерцаний, чтобы начать с вашей скрипки (я подозреваю, что моя конфигурация браузера/ОС/оборудования не считает, что для GPU подходит 2-мерная шкала), поэтому я 'm неспособный проверить этот код. Тем не менее, я использовал подобные методы для решения подобных проблем довольно часто.

Ответ 3

Ahhh, но вы пробовали

.usp .icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

http://jsfiddle.net/j04mayvb/4/

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

Ответ 4

OK!

Итак, проблема, с которой я столкнулся, была в пользовательском всплывающем окне, где у меня был эффект колеса на крестике с использованием перехода css. Но это вызвало проблему фликкера во всплывающем окне.

После посещения различных онлайн-порталов я узнал, что свойство перехода:

webkit-backface-visibility: hidden;

на перешедшем элементе действительно работает и останавливает мерцание. Но использование этого свойства размыло весь компонент (popup) в моем случае и, чтобы остановить это, мне пришлось использовать другое свойство в корневом элементе компонента:

webkit-transform: translate3d(0, 0, 0);

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

После того, как вы играли с помощью свойств css в течение нескольких дней и тестировали различные решения, я пришел к выводу, что общая высота компонента, в котором используется переходный элемент, должна быть EVEN, а в случае динамических данных - мы должны отрегулировать поля и прокладки таким образом, чтобы общая высота оставалась EVEN.

Это решило мою проблему. Просто убедитесь, что общая высота остается EVEN и соответственно корректирует поля и прокладки.

Надеюсь, это поможет любому, кто в этом нуждается.:)

Ответ 5

-webkit-transform: translate3d(0, 0, 0);
-webkit-text-stroke: 0.35px;

Эти коды написаны для поддержки нескольких браузеров. попробуйте это для mozila

-moz-transform: translate3d(0, 0, 0);
-moz-text-stroke: 0.35px;

Ответ 6

Я обнаружил, что это происходит главным образом на элементах, которые были преобразованы (то есть: модальный, который скользит). Есть ли какое-либо преобразование на любом из родительских элементов?

В Интернете существует множество исправлений для веб-браузеров, но ничего для Firefox.

Ответ 7

Мы также искали недели, пытаясь решить эту проблему. Вы можете использовать всевозможные трюки, подобные упомянутым выше, чтобы поместить элемент в свой собственный слой графического процессора. Но это приведет к тому, что текст будет преобразован в растровое изображение и, следовательно, будет размытым.

В нашем случае проблема возникла из-за одного пикселя. Когда вы центрируете модальный, используя перевод -50% или, возможно, используете% размеров. Детальные элементы внутри этого контейнера могут иметь одно положение (в зависимости от ширины/высоты модального). В chrome вы можете просто проверить это на элементе на вычисленной вкладке. Если есть одна позиция, вы можете увидеть их "прыгать" при наведении на другой элемент, например, анимированную кнопку css.

Когда вы наводите курсор на кнопку css, это не только отображение самого элемента, но и других элементов на странице. Из-за одной позиции вы можете видеть, как элемент прыгает.

Scale В нашем случае у нас была вторая проблема, мы хотели уменьшить масштаб страницы, когда пользователь посещает страницу с меньшим экраном. Сначала мы использовали "Перевести" (шкала). Шкала на родительском div также вызывает одно из поведений дочерних элементов. Скажем, ваш масштаб равен 0,8343493. В этом случае дочерние элементы пересчитываются и могут просто получить один. С анимацией css3 вы получаете ту же проблему, что и описанную выше.

После нескольких недель поиска ответ для Chrome был довольно простым, теперь мы используем более старый вариант zoom: 1.0 вместо translate: (scale 1.0). В результате мы получаем четкую и не мерцающую страницу.

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