Баг с transition + svg?

Question

[lestato9]

Наткнулся я на это совершенно случайно. В своем проекте с помощью селектора "*" задал для всех элементов страницы transition. Всё было ок до тех пор пока мне не нужно было стилизовать svg иконки. Наблюдал я следующее: в инспекторе хрома css свойства видно, а применяться они не хотят. В общем прикрепляю ссылку на код, кому интересно, попробуйте убрать правило с * и fill сработает https://jsfiddle.net/vmkxmLj7/ . Взываю к старейшинам верстки с просьбой прояснить ситуацию. Сам я искал причину довольно долго, поэтому очень интересно узнать почему такое происходит. Думаю, не только мне.

Answer 1

[Kovalsky]

Я не совсем компетентен в этом вопросе, но вероятно причина кроется в сложных отношениях CSS и Shadow DOM. К тому же определённую роль в этом поведении играет тот факт, что у вас нигде не задан изначальный цвет заливки.

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

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

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

Comments

[lestato9]

Некоторое время не мог понять почему ваш пример работает, а мой - нет, хотя между ними нет особой разницы. И обнаружил ещё одну интересную вещь - если самому спрайту вместо display: none задать width: 0, height: 0, то стили опять не работают. А с display: none всё ок

[lestato9]

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

[lestato9]

За ответ спасибо, пока подождем более конкретного ответа, если такой последует :)