Firefox, 위치 고정, 스크롤 막대

Question

이 예제에서는 div 빨강을 움직이면 오른쪽으로 이상한 움직임을 만듭니다. 나는 파이어 폭스에서만 문제가 발생한다고 생각한다. div가 맞다. 스크롤 막대와 위치가 고정되어있다.

(나는 절대 위치를 사용하는 경우 나는 움직임을 해결한다. 그러나 사용자가 스크롤하는 경우, 사업부의 이동, 그리고 오른쪽 하단에 "고정"한다)

오른쪽

• 파이어 폭스
• 스크롤 바
• 고정 된 위치

여기를 확인하시기 바랍니다 : 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

업데이트 : 더 나은 해결 방법이 발견되었습니다. widt 대신 min-width를 사용하십시오. h 고정 된 상자 : 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"}); 
    });  
})