Примечание к OP: вы, по крайней мере, знаете большинство из этих концепций, но я включил много подробностей в этот ответ для всех, у кого может быть аналогичная проблема.
В современных браузерах, работающих на компьютере с выделенным графическим процессором (процессор для рендеринга графики), браузер иногда переносит задачу рендеринга веб-страницы с вашего процессора («нормального» процессора) на GPU. У каждого процессора и графического процессора есть свои сильные и слабые стороны - природа графического процессора заключается в том, что он может эффективно обрабатывать трехмерные преобразования, но может не иметь возможности сделать чистый текст так же отчетливо, как это делает CPU.
Ваш эффект зависания использует преобразование, которое ваш браузер счел подходящим для рендеринга графического процессора с аппаратным ускорением (скорее всего, вызвано преобразованием scale(1.1)), и поэтому он временно переключил рендеринг на GPU, когда происходит анимация/переход наведения , После завершения анимации процессор снова берет на себя рендеринг. Из-за различных стратегий рендеринга, используемых различными аппаратными средствами, текст выглядит по-другому (менее четким), в то время как графический процессор отвечает за работу.
К сожалению, у нас пока нет четкого контроля аппаратного ускорения с помощью CSS - браузер устанавливает это, когда захочет. Однако мы можем установить некоторые свойства, которые подозревают, что поставит браузер в аппаратный ускоренный режим графического процессора. Теория здесь заключается в том, что мы будем держать браузер в режиме графического процессора даже тогда, когда анимация не происходит, так что мы не видим «мерцания».
Эта стратегия имеет некоторые недостатки: пользователи, посетившие ваш веб-сайт, будут немного увеличивать использование оперативной памяти, пока ваша страница будет открыта, а пользователи мобильных/ноутбуков будут испытывать немного повышенный разряд батареи. На устройствах, у которых нет выделенного графического процессора, аппаратное ускорение не будет запущено (но опять же, эти устройства не будут видеть «мерцание», которое вы видите в любом случае).
Похоже, вы уже пытались сделать это, добавив свойство 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);
}
С моей стороны, я не испытывал никакого мерцания, чтобы начать с на вашей скрипке (я подозреваю, что мой браузер/OS/hardware конфигурация не считает, что для GPU подходит 2-мерная шкала), поэтому я не могу проверить этот код. Однако я использовал подобные методы для решения подобных проблем довольно часто.
фрагмент кода Добавить на http://jsfiddle.net пожалуйста. –
Я попытался создать скрипку как можно лучше. (Потому что на всем сайте используется множество стилей, и я не мог просто скопировать/вставить что-то). Как-то эта скрипка работает в FF, а не в Safari. http://jsfiddle.net/Mr_recci/j04mayvb/2/ –
@MrRecci, поскольку jsfiddle не поддерживает sass, я думаю, что некоторые из ваших стилей в этой скрипке отсутствуют. –