通过 JavaScript 更改 marginTop-property 会导致 FireFox 出现错误的结果

我的问题：通过JavaScript更改边距顶部属性objectName.style.marginTop = value; Chrome和Safari中效果很好，但是在Firefox中，定位似乎都是错误的。Firefox 不是将元素放在视口上，然后降低它直到它略低于所需位置，然后将其向上移动一点，而是将其放置在最终位置下方，向上移动然后向下移动，几乎镜像所需的动画。

如果我切换Javascript并在CSS中输入值，定位就可以了，所以我想错误在于.js。

上下文：我正在尝试通过JavaScript创建一个简单的动画徽标。我希望它从浏览器视口外部下降到它的位置。徽标是 HTML 元素<img id="site_logo" src="logo.png" />

下面是 JavaScript 代码：

var logoValue = -400;
function onLoad(){  
    // ...
    logoStarter();
}
function logoStarter(){ //sets the logo in its starting position outside the viewport   
    var site_logo = document.getElementById("site_logo");
    site_logo.style.marginTop = logoValue +"px"; 
    logoAnimationDown();
}
function logoAnimationDown(){       // moves the logo down until it is somewhat underneath its final position 
    if(logoValue <= 20){    
        console.log(logoValue);
        logoValue += 17;
        var site_logo = document.getElementById("site_logo");           
        site_logo.style.marginTop = logoValue +"px";            
        setTimeout('logoAnimationDown()', 30);
        }
    else{
        setTimeout('logoAnimationUp()', 30);
        }
}   
function logoAnimationUp(){   // moves the logo up to its final position
    if(logoValue > 0){  
        console.log(logoValue);
        logoValue -= 10;
        var site_logo = document.getElementById("site_logo");           
        site_logo.style.marginTop = logoValue + "px";
        setTimeout('logoAnimationUp()', 30);
        }
}