title: draggable interaction broken on Firefox for Android after page scroll
body: <p>I'm working on a javascript draggable interaction that has to work with both mouse and touch input and <strong>does not have any dependencies</strong>. So far it works fine on desktops and mobiles.</p>
  
  <p><strong><em>Except Firefox for Android shows the following behaviour:</em></strong></p>
  
  <ul>
  <li>page is not scrolled: fine</li>
  <li>page is scrolled vertically: element can only be dragged horizontally</li>
  <li>page is scrolled horizontally: element can only be dragged vertically</li>
  <li>page is scrolled both vertically and horizontally: element can't be
  dragged at all</li>
  <li>scroll page back to the very top and left: element can be dragged as
  expected again</li>
  </ul>
  
  <p>The code:</p>
  
  <pre><code>var evtStart, evtMove, evtEnd;
  if ('ontouchend' in window) {
      evtStart = 'touchstart';
      evtMove  = 'touchmove';
      evtEnd   = 'touchend';
  } else {
      evtStart = 'mousedown';
      evtMove  = 'mousemove';
      evtEnd   = 'mouseup';
  }
  
  // BASIC DRAGGABLE INTERACTION
  // No further configuration, just drags ....
  var panel = document.querySelector('.testpanel');
  
  panel.addEventListener(evtStart, function(e) {
      e.preventDefault();
      var styles = window.getComputedStyle(panel),
          left   = parseFloat(styles.left),       // css left on mousedown
          top    = parseFloat(styles.top),        // css top on mousedown
          psx    = e.pageX || e.touches[0].pageX, // pointer x on mousedown
          psy    = e.pageY || e.touches[0].pageY; // pointer y on mousedown
  
      // function actually draging the elmt
      var drag = function (e) {
          e.preventDefault();
  
          var pmx = e.pageX || e.touches[0].pageX,    // current pointer x while pointer moves
              pmy = e.pageY || e.touches[0].pageY;    // current pointer y while pointer moves
  
          panel.style.left = left + (pmx - psx) + 'px';   // set new css left of elmt
          panel.style.top  = top  + (pmy - psy) + 'px';   // set new css top of elmt
  
      };
  
      panel.addEventListener(evtMove, drag);
  
      panel.addEventListener(evtEnd, function () {
          panel.removeEventListener(evtMove, drag);
      });
  });
  </code></pre>
  
  <p><a href="http://alpha.jspanel.de/dragtest.html" rel="nofollow noreferrer">Demo page</a></p>
  
  <p>Again, it works fine on desktop and mobiles except FF for Android.</p>
  
  <p>Why does it not work on FF for Android? Is it something in my code or is it a bug in FF? So far I could not find anything helpful.</p>
  
  <p>I would greatly appreciate any help.</p>