title: Firefox, position fixed, scroll bar
body: <p>In this example If I animate the div red it makes a strange movement to the right. I think the problem comes only with Firefox, the div is right, there is a scroll bar and position fixed.</p>
  <p>(If I use position absolute I solve the movement. But If the user scrolls, the div moves, and it should be &quot;fixed&quot; to the right, bottom)</p>
  <ul>
  <li>Firefox</li>
  <li>Right</li>
  <li>Scroll bar</li>
  <li>Fixed position</li>
  </ul>
  <p>Please check it here:
  <a href="http://jsfiddle.net/LhAEh/1/" rel="nofollow noreferrer">http://jsfiddle.net/LhAEh/1/</a></p>
  <p>HTML:</p>
  <pre><code>&lt;div id=&quot;blue&quot;&gt;&lt;/div&gt;
  &lt;div id=&quot;red&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>#red {
      position: fixed; /* fixed genera el problema */ 
      bottom: 20px; right:25px;
      width:80px; height:50px;
      cursor:pointer; 
      background:red;
  }
  
  #blue {
      margin:0 auto;
      width:80px; height:500px;
      background:blue;
  }
  </code></pre>
  <p>JQUERY:</p>
  <pre><code>$(function(){   
      $(&quot;#red&quot;).click(function() {
          $(&quot;#red&quot;).animate({bottom:'-80px'},1000);
      }); 
  })
  </code></pre>
  <p><img src="https://i.stack.imgur.com/aQ3gF.png" alt="Original position" />
  <img src="https://i.stack.imgur.com/KAWA8.png" alt="After click" /></p>
  <ul>
  <li><p>Image 1: Original position</p>
  </li>
  <li><p>Image 2: When someone clicks it moves right and then down. It should only moves down</p>
  </li>
  </ul>