Bug in browsers when transform translate works?

Question

css

Colleagues, I'm confused. I specify transform: translate(x,y) for ::after and on hover I change the position of the element vertically with translateY(y) . But the position also changes horizontally ( I want to say right away that if I also change with translate (x, y) then everything is fine ). I look at the inspector, the final styles are for some reason converted to transform: matrix . Can you explain this behaviour? This works exactly for pseudo-elements, an example is here .

Answer 1

this is not a bug, just the property is completely replaced. Those. the offset is not from the position you specify, but from the default position, and matrix is ​​displayed, perhaps because it contains almost all the transformations for the element and it is more convenient for the browser to read from it.

Answer 2

jsfiddle.net/soledar10/gkfqtmg5