@lestato9

Баг с transition + svg?

Наткнулся я на это совершенно случайно. В своем проекте с помощью селектора "*" задал для всех элементов страницы transition. Всё было ок до тех пор пока мне не нужно было стилизовать svg иконки. Наблюдал я следующее: в инспекторе хрома css свойства видно, а применяться они не хотят. В общем прикрепляю ссылку на код, кому интересно, попробуйте убрать правило с * и fill сработает https://jsfiddle.net/vmkxmLj7/ . Взываю к старейшинам верстки с просьбой прояснить ситуацию. Сам я искал причину довольно долго, поэтому очень интересно узнать почему такое происходит. Думаю, не только мне.
  • Вопрос задан
  • 331 просмотр
Пригласить эксперта
Ответы на вопрос 1
lazalu68
@lazalu68
Salmon
Я не совсем компетентен в этом вопросе, но вероятно причина кроется в сложных отношениях CSS и Shadow DOM. К тому же определённую роль в этом поведении играет тот факт, что у вас нигде не задан изначальный цвет заливки.

Так что это не то чтоб баг, а скорее такие вот особенности.

Сара Суайдан (из codrops!) пишет в своей статье (перевод), что проблему можно решить с помощью наследования, как-то так.

PS: запятые между свойствами transition не нужны: строкой "transition: all, ease, 1s;" вы объявляете целых три правила transition, а строкой "transition: all ease 1s;" - одно.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы