ionic的$ionicPopup,适配IOS11与IOS12

2018-10-10  本文已影响0人  程豪_4090

现象: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属性做了兼容?这只是一个猜想,希望有高人研究后告知。

上一篇下一篇

猜你喜欢

热点阅读