IOS兼容 - uniapp ios固定定位失效与刘海屏的坑
问题描述
uniapp 一套代码，打包之后安卓可以正常显示版本号，IOS不可以
错误现象：IOS只有滚动到屏幕底部才能看到版本号
原因分析：
IOS设计更希望屏幕跟随着用户滚动而滚动，所以无法实现相对浏览器窗口的固定定位。
IOS实现的功能是相对最近的允许滚动的元素定位，且不能遮罩滚动元素的兄弟吉父元素的兄弟元素。
一般情况：
固定定位是相对于浏览器窗口，且可以使页面中的某个元素不随浏览器的滚动而消失
IOS固定定位
固定定位相对于滚动元素，且可以随着屏幕滚动而消失
IOS的固定定位等同于它是相对滚动元素固定位置（类似于absolute定位）
解决方案：
如果需要浏览器的窗口定位，需要保证当前父元素不能添加滚动样式，才可实现固定定位。
将需要固定（position:fixed）的元素放在拥有滚动元素的外面即可，例如旋转transform/滚动条/轮播图scroll-view组件等等。
方案一：直接看成absolete定位，相对body作为父元素，使用绝对定位定位进行定位（较为繁杂）
方案二：隔离处理
将需要滚动的主体和固定的部分，分别用两个容器去写即可。
<body>
<div class='warper'>
<div class='main'></div>
<div>
<div class="bottom"></div>
</body>
css部分
.main{
overflow-y: scroll;
}
.bottom{
position:fixed;
bottom:0;
width: 100%;
}
总结：
-
fixed在某些情况下可能导致容器内的子元素的1px边框线消失，即使使用z-index也无法解决。
解决方法：可以使用translateZ属性来解决 -
ios下，fixed定位的容器内不能带有input等可以唤起键盘的元素。
解决方法： 在input聚焦唤起键盘时会去掉fixed定位状态，改为absolute。 -
尽量不要在可滚动的容器内包含fixed定位的子元素且ios不支持onresize事件
参考文章：https://blog.csdn.net/surui0419/article/details/128082238
https://blog.csdn.net/weixin_34357887/article/details/88016424