title: Responsive menu animation malfunction
body: <p>I've made this responsive slide in menu. I only added the code for the responsive view.</p>
  
  <p>It works like this. By default are <code>div.overlay</code> and <code>ul</code> hidden. With a click on the <code>.triggerRM</code> anchor, all elements become an extra class called <code>.openRM</code>, this animates (with CSS-transition):</p>
  
  <ul>
  <li><code>.overlay</code> makes a black cover over the body</li>
  <li><code>.triggerRM</code> left position is changed from <code>0%</code> to <code>100%</code> (with a bit of margin and background change)</li>
  <li><code>ul</code> right position gets changed from <code>100%</code> (hidden) to <code>5em</code>.</li>
  </ul>
  
  <p>All works like a charm on my computer (Win 7 + FF38). But when looking with my Android phone the <code>ul</code> transition doesn't work. When the button is clicked, the background pops up at his end position without the animation.</p>
  
  <p>The rest of the animation does work.</p>
  
  <p>Any ideas??</p>
  
  <p>Here 's the code:</p>
  
  <p><strong>HTML</strong></p>
  
  
  
  <pre><code>&lt;nav role="navigation"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link 4&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link 5&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;a href="#" class="triggerRM"&gt;Open menu&lt;/a&gt;
      &lt;div class="overlayRM"&gt;&lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>* {
      margin: 0;
      padding: 0;
      list-style: none;
  }
  nav ul {
      display: block;
      overflow: auto;
      position: fixed;
      top: 0;
      left: 0;
      right: 100%;
      bottom: 0;
      background: blue;
      z-index: 200;
  }
  nav ul li a {
      display: block;
      width: 100%;
      height: 46px;
      line-height: 46px;
      padding: 0 20px;
      vertical-align: middle;
      color: #fff;
      text-decoration: none;
  }
  nav ul li a:hover {
      background-color: #2849ee;
  }
  nav .triggerRM {
      display: block;
      position: fixed;
      z-index: 200;
      width: 2.5em;
      height: 2.5em;
      background: blue;
      border-radius: 0 7px 7px 0;
      top: 0;
      left: 0;
      text-indent: -1000%;
      overflow: hidden;
      background: blue url(http://gvss.ragas1.nl/img/menu-rm-btn.png) center center no-repeat;
      -webkit-background-size: 50% 50%;
      -moz-background-size: 50% 50%;
      -o-background-size: 50% 50%;
      background-size: 50% 50%;
  }
  nav ul,
  nav .triggerRM,
  nav .overlayRM {
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
  }
  nav ul.openRM {
      left: 0;
      right: 5em;
  }
  nav .overlayRM.openRM {
      position: fixed;
      background: black;
      top:0;
      bottom: 0;
      left: 0;
      right: 0;
      opacity: 0.5;
      z-index: 190;
  }
  nav .triggerRM.openRM {
      left: 100%;
      background-image: url(http://gvss.ragas1.nl/img/menu-rm-btn-close.png);
      margin-left: -5em;
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(function() {
      // Responsive menu 
      $("nav .triggerRM, nav .overlayRM").on("click", function(e) {
          e.preventDefault();
          $("nav .triggerRM,nav ul,body,.overlayRM").toggleClass('openRM');
      });
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/y3e2cbda/2/" rel="nofollow"><strong>JSFiddle</strong></a><Br />
  <a href="http://jsfiddle.net/y3e2cbda/2/embedded/result/" rel="nofollow"><strong>JSFiddle full page result</strong></a><Br /></p>