Комментарии 4
Также, пожалуйста, напишите в комментариях, какие у вас были случаи, когда CSS сбил вас с толку.
Drop-shadow + анимированный clip-path. Внезапно столкнулся несколько лет назад.
Казалось бы, всё норм, тенька отлично ложится на любой элемент с clip-path . Но как только clip-path анимируешь... Упс, drop-shadow говорит "я устала, я ухожу" — после начала анимации просто исчезает, и снова появляется на элементе только в финальном состоянии анимации. Наблюдалось во всех браузерах.
Методом (не)научного тыка удалось выяснить, что тенька работает на всём протяжении анимации, только если обернуть элемент с clip-path в дополнительный внешний контейнер-пустышку, назначив drop-shadow уже на него. Зачем, почему — сие науке так до сих пор и неизвестно...
Особую пикантность ситуации придаёт тот факт, что аккуратно и чётко работать по границам clip-path умеет только drоp-shadow — никакие другие виды теней не справляются.
Подобный нюанс видал как минимум в Firefox с backdrop-filter: blur. Если установить его элементу, а затем анимировать его передвижение через Web Animation API, то на время анимации блюр исчезает (всё чёткое), а в моменты остановки - снова появляется.
Анимировать цвета, градиенты, тени, фильтры, маски (вобщем весь "растр") плохая практика.. с точки зрения перформанса и батарейки.
Черт тебя возьми, CSS. Часть 3