美文网首页
ionic的$ionicPopup,适配IOS11与IOS12

ionic的$ionicPopup,适配IOS11与IOS12

作者: 程豪_4090 | 来源:发表于2018-10-10 12:07 被阅读0次

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

    相关文章

      网友评论

          本文标题:ionic的$ionicPopup,适配IOS11与IOS12

          本文链接:https://www.haomeiwen.com/subject/iljboftx.html