бэкграундом (картинкой) и текстом, при наведении используется такой стиль:
&:hover {
transform: translateY(-5px) scale(1.02);
z-index: 2;
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.3);
}
Все корректно работает, но текст при этом слегка трясется и расфокусируется во время трансформации. Можно ли этого избежать?
Нет мыслей?)
https://stackoverflow.com/questions/14677490/blurry-text-after-using-css-transform-scale-in-chrome
спасибо, почитаю вроде пока помогло transition: transform 300ms ease-in-out; еще поэкспериментирую)
Alex Tuor4eg (0) увеличил репутацию его имя роберт полсон (51)
Для таких случаев изобрели свойство will-change - ты даешь браузеру понять заранее что будет изменяться и от подергивания во время анимации это как раз и спасает
не знал, спасибо, тоже почитаю)
Alex Tuor4eg (0) увеличил репутацию And Smi (39)
Главное этим сильно не злоупотреблять. Это не то свойство чтоб было везде и всюду это только самый крайний случай
Это костыль, который приделали, когда поняли, что автоматически браузер не справляется и решили возложить это на плечи девелоперов )
Обсуждают сегодня