解决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>    

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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM