隐藏左侧菜单栏时，右侧框架里的网页在谷歌浏览器里会向下移动一个屏幕的距离

$(document).ready(function(){
    var isHiden = true; /*控制切换菜单*/
    $('#nav').click(function(){
        if(isHiden){
$('#jquery-accordion-menu').animate({left:'-=240px'});
$('#nav').animate({left:'-=240px'});
$('#right').animate({paddingLeft:'-=240px'});//菜单块向左移动
}else{
$('#jquery-accordion-menu').animate({left:'+=240px'});
$('#nav').animate({left:'+=240px'});
$('#right').animate({paddingLeft:'+=240px'});//菜单块向右移动
}
isHiden = !isHiden;
    });
})
---
<div id="nav" style="height: 18px; width: 16px; background-color: #32A3CB; position:absolute; z-index:2; left:240px;"><i class="icowhite fal fa-align-justify"></i>
</div>
<div id="jquery-accordion-menu" class="jquery-accordion-menu red"></div>
---
<div id="right" style="height:100%;width:auto;padding-left:240px;">
    <iframe src="http://www.baidu.com" id="mainiframe" name="mainiframe" marginwidth="0" marginheight="0" allowtransparency="true" onLoad="iFrameHeight()" frameborder="0" width="100%" height="100%"></iframe><!-- 右侧默认网址 -->
</div>
---
目前我点击nav的时候左侧的导航和网页会同时向左移动，再次点击会右移，这些在火狐浏览器里面都是正常的，但是用谷歌或IE或手机上看的时候，点击nav的，右侧iframe里面的网页会往下移动一个屏幕的距离，显示白底网页，需要滚动下拉才能正常显示，但是点击展开导航栏的时候网页又重新恢复了，请问是哪里设置错误了么，怎么改呢