Прыгают элементы при ховерах?

Question

[Nikita Shchypylov]

Всем привет

Ссылка на кодпен

У меня на страницах много элементов с transform:rotate, transform:scale
На примере, если наведете на картинку видно, как прыгает форма справа
Как это поправить?

Comments

[Алексей]

Можно так - codepen.io/anon/pen/gwEZmE но становится мыльно (добавил transform: translateZ(0); к .side-fixed-block).

[Nikita Shchypylov]

Алексей: А что вы изменили?
Почему вообще эта проблема возникает?

[Алексей]

Nikita Shchipilov: Добавил transform: translateZ(0) в .side-fixed-block в качестве "хака" для хрома чтобы включить графическое ускорение. Не уверен что это правильно.

[Nikita Shchypylov]

Алексей: Это помогает! Спасибо. Выведите ваш комментарий в ответы - я отмечу как правильный

[Алексей]

Nikita Shchipilov: Оформинл как ответ, спасибо.

[Nikita Shchypylov]

Алексей: Пожалуйста

Answer 1

[Алексей]

Можно так - codepen.io/anon/pen/gwEZmE но становится мыльно (добавил transform: translateZ(0); к .side-fixed-block).
Добавил transform: translateZ(0) в .side-fixed-block в качестве "хака" для хрома чтобы включить графическое ускорение. Не уверен что это правильно.

Answer 2

[Никита Кит]

Во-первых у тебя в section offers каша - один лишний закрывающий div

А вот вторых на форму наследуется transition, что странно - судя по всему transform при этом не наследуется. Это же очевидно, что внутренности транзитятся (прыгают).
И блин, бога ради, юзай БЭМ!

Comments

[Никита Кит]

а нет, див не лишний. Но transition наследуется на форму. Отмени принудительно или перенаследуй

[Nikita Shchypylov]

Никита Кит: Бэм использую - не полностью, но имена да. Это старая часть проекта
И почему ради Бога?БЭМ не панацея
Попробую отменить

[Nikita Shchypylov]

Отмена не сработала

[Никита Кит]

Nikita Shchipilov: А вот у меня перестало прыгать, сразу же как только я убрал с формы все трансформы и транзишены.
Они у тебя прямо на #fixed-form
Правда форма после этого просела вниз. Тут уже я не знаю откуда баг. Подозреваю что ты флоуты заюзал. И тут 2й совет - не юзай флоуты. Если в контейнер накидать элементов с флоутами, родитель их не заметит и свернётся в height: 0;

[Никита Кит]

Nikita Shchipilov: ан нет, из-за position fixed с отступом от top она просела. Если вешаешь fixed-форму вниз окна, то и отступ от bottom отсчитывай.