title: CSS transition during touchmove on iOS 7 devices won't run
body: <p>The CSS classes of an element <code>x</code> changes whenever the user scrolls up from <code>.stash.off</code> to <code>.stash.off.in</code> and from <code>.stash.off.in</code> to <code>.stash.off</code> when the user scrolls down. The CSS selectors <code>.stash</code>, <code>.stash.off</code> and <code>.stash.in</code> are defined as followed:</p>
  
  <pre><code>.stash
  {
      position: absolute;
  
      visibility: hidden;
  
      -webkit-transition: .35s;
              transition: .35s;
      -webkit-transform: translate(0, -60px);
              transform: translate(0, -60px);
  }
  .stash.in
  {
      visibility: visible;
  
      -webkit-transition: .35s;
              transition: .35s;
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0);
  }
  .stash.off
  {
      position: fixed;
  
      -webkit-transition: .35s;
              transition: .35s;
  }
  </code></pre>
  
  <p>Using the <code>scroll</code> event to perform the transitions with jQuery's <code>toggleClass()</code> works flawless on desktops and touch devices. But <code>scroll</code> on touch devices is fired with <code>touchend</code> which brings some kind of delay. To get rid of this delay <code>touchmove</code> should be the replacement for <code>scroll</code> on touch devices. </p>
  
  <p>But the same JS code working with <code>scroll</code> doesn't work on some touch devices when <code>touchmove</code> is used. Instead of an animation the target element <code>x</code> just pops in and out without any transition. Mostly Apple devices with iOS 7 seems to be affected.</p>
  
  <p>How can I get the transition get working on such Apple devices when <code>touchmove</code> is used?</p>
  
  <p>Here is the <a href="http://jsfiddle.net/eWEnL/" rel="nofollow noreferrer"><strong>JSFiddle</strong></a>. <a href="https://stackoverflow.com/questions/19158498/css-transition-inconsistent-when-triggered-on-touch-move">This</a> seems be related.</p>