5

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.

leo
  • 8,106
  • 7
  • 48
  • 80
  • 1
    Works for me on Firefox with the rest of the prefixes provided in your fiddle. – BoltClock May 08 '14 at 16:21
  • True, works in Firefox, but not in Chrome, it seems – leo May 08 '14 at 16:22
  • The transform does not appear to work in IE at all - perhaps IE doesn't support transforms on SVG elements just yet. Chrome's behavior is just *weird*, though, but then again, Chrome always has weird behavior. – BoltClock May 08 '14 at 16:23
  • 1
    this corrects the bug in chrome : http://jsfiddle.net/webtiki/MM3VC/2/ – web-tiki May 08 '14 at 16:23
  • @web-tiki Thanks for the fix! Still a mystery to me, though... – leo May 08 '14 at 16:24
  • yes, mystery to me too, that is why I didn't post an answer. – web-tiki May 08 '14 at 16:25
  • 1
    I'm guessing Chrome has trouble reapplying `transform: none` (the default) on SVG elements after applying a transform to them for whatever reason, because setting that explicitly instead of `transform: rotate(0deg)` doesn't fix it either. It doesn't have this problem with HTML elements. – BoltClock May 08 '14 at 16:27

3 Answers3

3

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/

Sam
  • 895
  • 1
  • 8
  • 26
0

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);
    }

}

avera813
  • 66
  • 1
  • Yep, I'm well aware that it's only occuring in SVG's, hence the example in the fiddle! – leo May 08 '14 at 20:04
0

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;
  }
}
Farukh Khan
  • 199
  • 5
  • 21