Firefox, position fixed, scroll bar

Question

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.

(If I use position absolute I solve the movement. But If the user scrolls, the div moves, and it should be "fixed" to the right, bottom)

• Firefox
• Right
• Scroll bar
• Fixed position

Please check it here: http://jsfiddle.net/LhAEh/1/

HTML:

<div id="blue"></div>
<div id="red"></div>

CSS:

#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;
}

JQUERY:

$(function(){   
    $("#red").click(function() {
        $("#red").animate({bottom:'-80px'},1000);
    }); 
})

• Image 1: Original position

• Image 2: When someone clicks it moves right and then down. It should only moves down

Answer 1

It looks like a workaround was found, change the fixed box's position to absolute and put it inside another fixed position div: CSS fixed position movement under scrollbar in Firefox

Also, there is an open bug on this issue: CSS position fixed no longer factors in scrollbar after hover

UPDATE: A better workaround was found, use min-width instead of width for the fixed box: https://stackoverflow.com/a/15705522/980692