Firefox中的動畫元素移動其他元素

Question

我正在開發具有鍵盤控制滾動的單頁網站。

我已經創建了動畫div創建滾動效果的javascript函數。

JS：

var current_page = "#first"; 
function animateScroll(curr, des){ 
    $(des).show(); 
    $(des).css("position", "absolute"); 
    $(des).css("z-index", "2"); 
    $(curr).css("z-index", "1"); 
    $(des).css("top", "100%"); 
    $(des).animate({ 
     top : "0px" 
    }, 800, function(){ 
     $(curr).hide(); 
     current_page = des; 
    }); 
} 
$(document).on("keyup", function(e){ 
    if(e.keyCode === 40){ 
     animateScroll(current_page, "#" + $(current_page).next().attr("id")); 
    } 
}); 

HTML：

<div id = 'why_am_i_moving'></div> 
<div class = 'main' id = 'first'>press down key</div> 
<div class = 'main' id = 'second'></div> 
<div class = 'main' id = 'third'></div> 
<div class = 'main' id = 'fourth'></div> 
<div class = 'main' id = 'fifth'></div> 

CSS：

body, html{ 
    margin : 0px; 
    padding : 0px; 
    width : 100%; 
    height : 100%; 
    overflow : hidden; 
} 
div.main{ 
    width : 100%; 
    height : 100%; 
    display : none; 
    background : white; 
} 
#first{ 
    background : red; 
    display : block; 
} 
#second{ 
    background : blue; 
} 
#third{ 
    background : green; 
} 
#fourth{ 
    background : yellow; 
} 
#why_am_i_moving{ 
    position : absolute; 
    bottom : 0; 
    width : 200px; 
    height : 200px; 
    background : brown; 
    z-index : 3; 
} 

有時，當我在KEYUP運行我的功能，我的網頁上的所有元素開始動畫前拉昇小幅。

這隻發生在Firefox（38.0.5），只有當我使用向下鍵啓動動畫。

小提琴：http://jsfiddle.net/bd8wzr1L/2/

是否有人知道這裏發生了什麼？ 感謝您的幫助。

Answer 1

據我可以告訴這是Firefox的一個錯誤。當你按下時，身體向上移動。您可以通過將position: absolute;添加到身體標記來解決此問題。

jsfiddle