Css transform scale дергается

Избавляемся от мерцания при CSS-трансформации в Safari

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

Особенно заметны такие артефакты когда трансформация стоит на псевдоклассе :hover, т.е срабатывают при наведении мыши на элемент. В моём случае увеличение кнопки .btn при наведении на неё мыши, перманентно вызывало изменение типа сглаживания текста в соседних блоках.

Проблема связана с нехваткой ресурсов для рендеринга, и довольно легко лечится.

Translate3D

Самый простой способ решения задачи — это активизация аппаратного ускорения, которое для двухмерной анимации в CSS по умолчанию отключено. Для этого просто создаём пустую 3D-анимацию.

-webkit-transform: translate3d(0,0,0);
 
Will-Change
 
В CSS существует относительно новое и пока малоизвестное свойство will-change, которое заранее передаёт браузеру информацию о возможном предстоящем изменении того или иного элемента. Например, если элемент планируется трансформировать, об этом можно предупредить браузер, чтобы он приберёг силы, как говорится. В случае с вышеупомянутой кнопкой, выглядит это так:
 
Если планируется изменение нескольких параметров, их можно задать последовательно через запятую. Например, для трансформации с изменением прозрачности:
 
will-change: transform, opacity;
 
Таким образом, браузер сможет заранее подготовиться к тяжёлой обработке и оптимизировать использование ресурсов. Что позволит избежать появления на странице различных побочных эффектов.
 
⚡️ Подписывайся на мой канал @DanilinBiz и ты узнаешь, почему фриланс это свобода, а работа в штате рабство.
 
Делаю сайты на Вордпресс с 2008 года, в том числе уникальные инструменты для решения сложных бизнес‑задач.
 
Источник
 
Почему при использовании input range + transform scale дёргается изображение?
 
Написал скрипт, который при нажатии на лупу с плюсом, увеличивает изображение. При нажатии на лупу с минусом, уменьшает изображение. Происходит это так:
 
$(function() < $('#zoom-plus').click(function () < var $mywidth = $('.images').width(); var $ratio = 1.1; var $newwidth = ($mywidth * $ratio) + 'px'; $('.images').css("width", $newwidth) >); $('#zoom-minus').click(function () < var $mywidth = $('.images').width(); var $ratio = 0.9; var $newwidth = ($mywidth * $ratio) + 'px'; $('.images').css("width", $newwidth) >); >);
 
Это работает, но если изображение становится больше окна браузера или самого родительского элемента, оно, естественно, позиционируется слева, и его часть уходит за правый край. Необходимо, чтобы изображение всегда центрировалось посередине.
 
UPD Задачу решил, высчитывая нынешнюю ширину блока и прибавляя отрицательный марджин, который равен половине от разницы в ширине нового размера изображения и родительского элемента.
 
$(function() < $('#zoom-plus').click(function () < var $mywidth = $('.images').width(); var $ratio = 40; var $newwidth = ($mywidth + $ratio) + 'px'; var $parent = $('.lite-box').width(); var $margin = '-' + (($mywidth + $ratio - $parent) / 2) + 'px'; if ($mywidth < $parent) < $('.images').css("width", $newwidth) >else if ($mywidth == $parent) < $('.images').css("width", $newwidth); $('.images').css("margin-left", $margin) >else if ($mywidth > $parent) < $('.images').css("width", $newwidth); $('.images').css("margin-left", $margin) >else < alert('33') >; >); $('#zoom-minus').click(function () < var $mywidth = $('.images').width(); var $ratio = 40; var $newwidth = ($mywidth - $ratio) + 'px'; var $parent = $('.lite-box').width(); var $margin = '-' + (($mywidth - $ratio - $parent) / 2) + 'px'; if ($mywidth >$parent) < $('.images').css("width", $newwidth); $('.images').css("margin-left", $margin) >else if ($mywidth else <> >); >);
 
Удобнее получается использовать transform: scale, но есть проблема: при добавлении transition, изображение начинает дёргаться, если медленно перемещать ползунок. Посмотрите сами:
 
Простой 3 комментария
 
Источник
 
 Alexander Borshak 
 
Делая кое-какую работу по сайту http://inventive.ru/ заметил неприятную вещь — слайдер с эффектом Кена Бёрнса, что на главной, который я когда-то делал, в Firefox почему-то начал увеличивать картинки рывками. Зрелище было не из приятных. А вот в Хроме, к примеру, по прежнему все было ОК, то есть плавная анимация, как и положено.
 
Чтобы было понятно о чем я говорю, я оставил данный эффект у себя на тестовой площадке - http://layouts.borshak.com/inventive/ Причем наблюдается он не только в Firefox (v.35), но и в Internet Explorer (v.11). Хотя раньше, разумеется, все было нормально — я тестировал эффект с нескольких компьютеров, плюс перед внедрением на рабочий сайт эффект тестировали коллеги.
 
После непродолжительного изучения CSS через FireBug полез искать в интернет — может кто-то уже решал данную проблему. Первое, на что наткнулся - установка свойства
 
backface-visibility:hidden; 
на анимируемый блок. Не помогло.
 
Однако потом наткнулся на заметку веб-разработчика Джиеля Беркерса. У него возникла точно такая же проблема, и решил он её следующим образом — добавил к трансформации в FireFox небольшой поворот блока, всего в 0,02 градуса (угол столь мал, что визуально никакого поворота незаметно). Я попробовал повторить, и — о, чудо! — всё заработало как надо.
 
Поскольку у меня проблема наблюдалась и в IE, добавил этот "финт ушами" и для него.
 
В итоге, мои правила трансформации выглядят сейчас так:
 
 -webkit-transform: scale(1.08);
transform: scale(1.08);
-moz-transform: scale(1.08) rotate(0.01deg);
-ms-transform: scale(1.08) rotate(0.01deg);
 
— 1-е правило задано специально для Safari под Mac — без него он напрочь отказывался что-либо анимировать. 
— 2-е правило — для всех современных браузеров. 
— 3-е и 4-е — оперативное решение проблемы для Firefox и IE. 
 
Источник
 
Избавляемся от мерцания при CSS-трансформации в Safari
 
Не в первый раз замечаю, что при использовании CSS-трансформаций, некоторые элементы на странице в Safari таинственным образом меняют свои свойства. В других браузерах подобное наблюдается значительно реже.
 
Особенно заметны такие артефакты когда трансформация стоит на псевдоклассе :hover, т.е срабатывают при наведении мыши на элемент. В моём случае увеличение кнопки .btn при наведении на неё мыши, перманентно вызывало изменение типа сглаживания текста в соседних блоках.
 
Проблема связана с нехваткой ресурсов для рендеринга, и довольно легко лечится.
 
Translate3D
 
Самый простой способ решения задачи — это активизация аппаратного ускорения, которое для двухмерной анимации в CSS по умолчанию отключено. Для этого просто создаём пустую 3D-анимацию.
 
-webkit-transform: translate3d(0,0,0);
 
Will-Change
 
В CSS существует относительно новое и пока малоизвестное свойство will-change, которое заранее передаёт браузеру информацию о возможном предстоящем изменении того или иного элемента. Например, если элемент планируется трансформировать, об этом можно предупредить браузер, чтобы он приберёг силы, как говорится. В случае с вышеупомянутой кнопкой, выглядит это так:
 
Если планируется изменение нескольких параметров, их можно задать последовательно через запятую. Например, для трансформации с изменением прозрачности:
 
will-change: transform, opacity;
 
Таким образом, браузер сможет заранее подготовиться к тяжёлой обработке и оптимизировать использование ресурсов. Что позволит избежать появления на странице различных побочных эффектов.
 
⚡️ Подписывайся на мой канал @DanilinBiz и ты узнаешь, почему фриланс это свобода, а работа в штате рабство.
 
Делаю сайты на Вордпресс с 2008 года, в том числе уникальные инструменты для решения сложных бизнес‑задач.
 
Источник
 
Баг при использовании "transform: scale();"
 
При наведении на блок он должен увеличиваться и текст внутри него, соответственно, что собственно и происходит. Хром отображает все корректно, а вот мазила - нет. В мазиле наблюдается такой баг, что текст начинает немного дергаться, когда изменяет свой размер. Понятно, что это все происходит из-за пикселизации и из-за нецелого коэффициента увеличения.
 
Буду благодарен тем, кто подскажет, как убрать этот дергающийся эффект и заставить мазилу отображать все корректно.
 
Ответы (4 шт):
 
Попробуйте задать вместе со скейлом транслейтЗед transform: scale(1.5) translateZ(0);
 
UPD: проблема должна решиться, потому что translateZ запускает в браузере аппаратное ускорение анимации, что благоприятно влияет на ее отображение
 
В текущей мозиле фиксится через svg filter, но проблема в том, что она в растр текст переводит и она бьется при ресайзе. Но можно такой хак применить например:
 
div < display: flex; justify-content: center; align-items: center; background-color: red; margin: 5em auto; width: 15rem; height: 12rem; transition: transform .2s; will-change: transform; >div > p< color: #fff; font-size: 48px; transform: scale(.5); filter: url('data:image/svg+xml;utf8,#gaussian_blur'); > div:hover
 
Ну и подогнать положение текста под контейнер с учетом скэйла
 
подними will-change: transform; выше строчки transition: transform .2s;
 
что бы он читал will-change должен прочитать раньше и еще
 
div:hover добавь transition: transform .2s;
 
Попробуйте, запретить отображать скрытые части скейлящегося объекта:
 
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */ backface-visibility: hidden; 
 
Большинство дерганий при скейлинге это лечит.
 
Источник
 
Читайте также:  Implement list class java