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/

Answer 2

This might be more of an svg issue with re-rendering/re-drawing.

Here is an example using a div instead: http://jsfiddle.net/avera813/26eDr/

  .bar {
    width:10px;
    height:50px;
    background-color:orange;
    display:block;
  }

  @media (max-width: 480px) {
    .bar {
      background-color: red;
      -webkit-transform: rotate(10deg);
      -moz-transform: rotate(10deg);
      -o-transform: rotate(10deg);
      -ms-transform: rotate(10deg);
      transform: rotate(10deg);
    }

}

Answer 3

May be if you can try to use display:inline it would rather work. Worked for me with this.

.verticalTop {
  transform: rotate(270deg);
}

@media (max-width: 800px) {
  .verticalTop {
    display: inline;
  }
}