it-swarm.com.ru

CSS3 Transform вызывает мерцание текста в Safari и Firefox Mac Yosemite

У меня странная проблема с Safari и Firefox (Mac/Yosemite), из-за которой почти весь текст на странице мерцает при наведении курсора на элемент преобразования.

Пример gif: (Firefox, Yosemite)

enter image description here

.usp {
   //USP has an icon that is defined below
    opacity: .4;
    @include transition(all .3s ease-in-out);


    &:hover { 
        opacity: 1;
        @include transition(all .3s ease-in-out);


        .icon {
            @include transform(scale(1.1));
            @include transition(all 1.7s ease-in-out);
        }
    } // :hover
} 

.usp .icon {
    display: block;
    height: 75px;
    width: 75px;
    // Insert background-image Sprite (removed from this example)
    @include transition(all .3s ease-in-out); 
    @include transform(scale(1.0));
}

Я пробовал следующие вещи:

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

-webkit-transform-style:preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
 backface-visibility: hidden;
-webkit-filter: opacity(.9999);
-webkit-font-smoothing: antialiased;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
-webkit-font-smoothing: subpixel-antialiased;
-webkit-text-stroke: 0.35px;

Если (тело ниже) применено к телу, проблема исправлена ​​в Safari, но не в Firefox, поскольку это не браузер webkit.

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

Я буквально не знаю, что вызывает это и как я могу это исправить!

14
Rick Doesburg

Хорошо!

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

Добавляя

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

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

EDIT 1: для людей, у которых есть эта проблема в других браузерах, взгляните на CSS свойство will-change: https://dev.opera.com/articles/css-will -change-property/

18
Rick Doesburg

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

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

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

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

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

Похоже, вы уже пытались сделать это, добавив свойство 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), поэтому я не могу проверить этот код. Тем не менее, я использовал подобные методы для решения подобных проблем довольно часто.

8
Woodrow Barlow

Аааа, но ты пробовал

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

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

 enter image description here

Честно говоря, я понятия не имею, почему это работает, но я вижу, как оно перестает мерцать на вашем Fiddle в Safari. 

2
MattDiamant

ХОРОШО!

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

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

webkit-backface-visibility: hidden;

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

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

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

Проработав несколько дней со свойствами css и опробовав различные решения, я пришел к выводу, что общая высота компонента, в котором используется переходный элемент, должна бытьЧЕТНОЙ, а в случае динамических данных нам необходимо настроить поля и отступы таким образом, что общая высота остаетсяДАЖЕ.

Это решило мою проблему. Просто убедитесь, что общая высота остаетсяЧЕТНОЙи соответствующим образом отрегулируйте поля и отступы.

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

1
Avaneesh Tripathi

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

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

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

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

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

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

0
Berry van Elk

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

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

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

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

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