Firefox, фиксированное положение, полоса прокрутки

Question

В этом примере Если я одушевляю div red, это делает странное движение вправо. Я думаю, проблема возникает только с Firefox, div прав, есть полоса прокрутки и фиксированная позиция.

(Если я использую позицию абсолютной Решает движение. Но если прокрутка, то DIV двигается, и это должно быть «фиксированным» вправо, вниз)

• Firefox
• Right
• прокрутки
• Фиксированная позиция

Пожалуйста, проверьте его здесь: 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); 
    }); 
}) 

• Изображение 1: Исходное положение
• Изображение 2: Когда кто-то нажимает, он перемещается вправо, а затем вниз. Он должен только съезжает

Answer 1

Похоже, обходной путь был найден, изменить положение фиксированного ящика для абсолютных и поместить его в другом фиксированном положении DIV: CSS fixed position movement under scrollbar in Firefox

Кроме того, есть открытая ошибка на этот вопрос: CSS position fixed no longer factors in scrollbar after hover

ОБНОВЛЕНИЕ: Лучшее обходное решение было найдено, используйте min-width вместо widt ч для фиксированной ячейки: https://stackoverflow.com/a/15705522/980692

Answer 2

http://jsfiddle.net/CGkEU/2/

попробовать этот jsfiddle

.background{ 
    position:static; 
} 

Answer 3

Это то, что вы ищете?

Demo

.background{ 
    position:relative; 
} 

$(function(){  
    $("#red").click(function() { 
     $("#red").animate({bottom:'15px'},1000); 
     $("#red").css({"position":"absolute","right":"15px"}); 
    });  
})