解决fixed在ios抖动问题

最近公司项目做页面样式改版,需要把表单提交按钮都悬浮到页面最底部。

用了fixed来使按钮悬浮,但在ios,页面超过一屏滑动的时候按钮会抖动。

<template>
    <div id="main">
        <div class="content">
            <input type="text" placeholder="请输入XX">
            ...
            <footer>
               <div class="footer">
                  <span>提交</span>
               </div>
             </footer>
        </div> 
    </div>
</template>
<style>
footer .footer{
    width:100%;
    position:fixed;
    bottom:0
}
</style>    

解决办法就是不要把footer放到和页面内容一个盒子里,拿出来,如下

<template>
    <div id="main">
        <div class="content">
            <input type="text" placeholder="请输入XX">
            ...
        </div> 
        <footer>
            <div class="footer">
               <span>提交</span>
            </div>
        </footer>
    </div>
</template>
<style>
footer .footer{
    width:100%;
    position:fixed;
    bottom:0
}
</style>    

这样做以后,按钮再也不会乱动了,完美

 

posted @ 2020-09-09 18:37  方小川  阅读(962)  评论(0编辑  收藏  举报