title: How to fix broken transform-origin on iOS11 and macOS10.12 Safari?
body: <p>I'm trying to implement CSS animation by using svg.<br>
  I am expecting that 2 svg boxes is rotating (spinning) with <code>transform-origin: center center;</code> 360 degrees. Looks like it behave what I expected with Chrome and Firefox but not with macOS 10.12 (High Sierra) and iOS 11.0.x and 11.1 beta Safari.<br>
  Seems like <code>transform-origin: center center;</code> does not work in Safari?</p>
  
  <p>Is there any way to fix this issue?</p>
  
  <p>What I expect:
  <img src="https://i.stack.imgur.com/myLQT.gif" alt="What I expect"></p>
  
  <p>What I see on Safari:
  <img src="https://i.stack.imgur.com/tg9ou.gif" alt="What I see on Safari"></p>
  
  <p>Here is a sample code</p>
  
  <p>HTML:</p>
  
  <pre><code>svg(width=500, height=500, viewBox='0 0 500 500')
    rect(x=100, y=100, width=50, height=100)
    rect(x=400, y=100, width=50, height=100)
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
  
    100% {
      transform: rotate(360deg);
    }
  }
  
  rect {
    transform-origin: center center;
    animation-duration: 3s;
    animation-name: rotate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  
    &amp;:nth-child(1) {
      fill: red;
    }
  
    &amp;:nth-child(2) {
      fill: blue;
    }
  }
  </code></pre>
  
  <p>You can see the behavior here by accessing with Chrome and Safari:
  <a href="https://codepen.io/manaten/pen/aLeXjW" rel="noreferrer">https://codepen.io/manaten/pen/aLeXjW</a></p>
  
  <p>EDIT:</p>
  
  <p><a href="https://codepen.io/manaten/pen/aVzeEK" rel="noreferrer">https://codepen.io/manaten/pen/aVzeEK</a>
  Another example of the issue. Looks like origin is set to be the center of svg element by Safari.</p>