title: Safari bug when with transform you combine rotate and translate
body: <p>I need to make a spin wheel and so far it work well in chrome on responsive etc but the probleme is taht on responsive i have to center the wheel and i use transform translate(-50%) and combine it with a rotate(360 * 3 + randomNumber(0 -- 360)) to get a decend spin on the wheel and a random target on the wheel.</p>
  <p>On chrome i works fine, thje wheel make her turns but on mobile safari, it only make a little turn corresponding to the &quot;randomNumber(0 -- 360)&quot;</p>
  <p>Here is the code, simplified with an hover because the real project is a bit more &quot;messy&quot; and the bug also exist on hover</p>
  <pre class="lang-css prettyprint-override"><code>body{
      width: 100vw;
      height: 100vh;
      display: grid;
      place-content: center;
      background: #444444;
  }
  
  .spin{
      width: 400px;
      height: 400px;
      background: red;
      transition: 6s ease;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
  }
  
  .spin:hover{
      transform: translateX(-50%) rotate(1100deg);
      -webkit-transform: translateX(-50%) rotate(1100deg);
  }
  </code></pre>
  <p>if you want to try at home here i have set 1100 deg to test but the wheel will only make 20deg of spin in 6s because 1100 - 360 * 3 = 20deg</p>
  <p>Hope someone got the solution, thank you all</p>