移动端采坑:Position: fixed 在Safari上的Bug

时间:2022-03-24 01:50:18

Position: fixed 在IOS上的显示效果

会出现两种情况:

  • 点击fixed定位的元素会出现fixed定位失效导致的元素贴向底部,即position: absolute,bottom: 0px;的情况

  • 点击fixed定位的元素,元素向上移,定位生效,位置偏移大

解决方案 - 仅针对Safari

给fixed定位元素设置一个点击事件,在点击事件会调函数中加入 window.scrollTo(0, document.body.scrollHeight); (将页面视口定位至页面底部),然后改变改定位元素的css class,把 position: fixed ==> position: absolute,这样,我们就可以很快的解决fixed定位导致的前两类Bug,当然,如果定位元素是Input标签,别忘了增加 blur 事件在失去聚焦后把css class改回。

其他解决方案

http://efe.baidu.com/blog/mobile-fixed-layout/