title: IOS Safari transition transform not working
body: <p>Whenever I seem to apply some code to let's say move a div for example using the latest iOS Safari browser it doesn't actually transition between the two rules set. I have tried changing to use other than percentage values but still to this day, I have never been able to get it to work when I use <code>transition: transform;</code> for any <code>translate</code> property applied.</p>
  
  <p>I'm using the correct prefixes and checked support and should be working no problem.</p>
  
  <p><a href="http://caniuse.com/#search=transition" rel="nofollow">http://caniuse.com/#search=transition</a></p>
  
  <p><a href="http://caniuse.com/#search=translate" rel="nofollow">http://caniuse.com/#search=translate</a></p>
  
  <p><a href="https://jsfiddle.net/95y4pejs/1/" rel="nofollow">JSFiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('button').on('click', function() {
      $('.mydiv').toggleClass('added-class');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.mydiv {
      display: inline-block;
      width: 100px;
      height: 50px;
      background-color: red;
  
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -moz-transition: transform 0.6s ease-out;
      -o-transition: transform 0.6s ease-out; 
      -webkit-transition: transform 0.6s ease-out;
      transition: transform 0.6s ease-out;
  }
  
  .added-class {
      -moz-transform: translateY(100%);
      -ms-transform: translateY(100%);
      -o-transform: translateY(100%);
      -webkit-transform: translateY(100%);
      transform: translateY(100%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="mydiv"&gt;&lt;/div&gt;
  &lt;button type="button"&gt;Toggle class&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>