解决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>
这样做以后,按钮再也不会乱动了,完美