Why does CSS rotation in media query not rotate back

Question

I have an SVG, in which some elements are rotated depending on a mediaquery, like this:

@media (max-width: 480px) {
    rect {
        transform: rotate(10deg);
    }
}

The element rotates just fine, but (at least in Chrome) it refuses to go back. Why is that? Other directives, such as fill, work in both direction.

JSFiddle: http://jsfiddle.net/MM3VC/1/

Edit: Whatever caused this bug has been fixed in Chrome. In v79+ (early 2020), the issue is no longer present.

Answer 1

I'm not sure why it doesn't rotate back but you could try this which goes back when the viewport gets wider

rect {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
}

@media (max-width: 480px) {
    rect {
         fill: red;
        -webkit-transform: rotate(10deg);
        -moz-transform: rotate(10deg);
        -o-transform: rotate(10deg);
        -ms-transform: rotate(10deg);
        transform: rotate(10deg);
    }
}

http://jsfiddle.net/MM3VC/3/