Баг в браузерах при работе transform translate?

Question

[Илья Пестов]

Коллеги, я в замешательстве. Указываю transform: translate(x,y) для ::after и при ховере меняю положение элемента по вериткали с помощью translateY(y). Но положение меняется и по горизонтали (сразу хочу сказать, что если меняю также с translate(x,y) то все нормально). Смотрю инспектор, итоговые стили почему-то преобразовались в transform: matrix. Сможете объяснить такое поведение? Так работает именно для псевдоэлементов, пример тут.

Answer 1

[M K]

это не баг, просто свойство полностью заменяется. Т.е. смещение происходит не из заданной вами позиции, а из позиции по умолчанию, а matrix отображается, возможно, потому, что он содержит в себе почти все преобразования для элемента и браузеру удобнее из него считывать.

Comments

[Илья Пестов]

Но это как-то странно. С background также же нет. Когда я background-color меняю или еще что нибудь.

[M K]

Илья Пестов: там немного другая система парсинга, свойство background - это просто сокращение нескольких свойств, которая раскладывается при парсинге на составляющие и переписывается именно составляющая, а не все свойства background-*

Answer 2

[Дмитрий]

jsfiddle.net/soledar10/gkfqtmg5

Comments

[Илья Пестов]

я знаю, что так будет рабоать, мне интересно почему не работает с translateY