ionic的$ionicPopup,适配IOS11与IOS12

现象:ionic项目,IOS12系统,一个自定义template的ionicPopup显示如图1,结果点击第一个input,弹出键盘,此时ionicPopup框下移,见图二。此现象在IOS11的手机上不存在,显示正常。


探索过程:手机连接电脑,用safari打开webapp的调试模式,具体步骤详见https://www.jianshu.com/p/5b2305929041。观察,点击input后,popup的样式变化。


结果发现控制popup居中的class如图:


ionicPopup将modal框居中的方式为position设为absolute,尝试改为fixed后,问题解决。


思考:css的fixed是固定定位,absolute是绝对定位,当没有滚动条的情况下没有差异,在有滚动条的情况下,fixed的定位不会随滚动条的移动而移动,但是absolute则会随滚动条移动。所以一般fixed用在遮盖层与固定在页面某个位置,如固定在顶部的频道栏,或弹框居中显示。

但是为什么IOS11系统上popup定位方式是用absolute结果没有出现弹框被键盘遮盖的情况呢?据悉ios11之前的系统不兼容position:fixed属性。难道苹果在更新IOS12后对fixed属性做了兼容?这只是一个猜想,希望有高人研究后告知。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容