“fixed” css style in mobile safari

最近在实现一个微信问答html页面的过程中遇到一个问题:问答获得满分的时候有一个输入手机号参议抽奖的步骤,

在填写完手机号之后不点单击完成按钮(不隐藏软键盘)的情况下直接点击提交按钮,提交按钮本应显示一个全屏的cover,

但此时却只显示了中间的一段(隐藏软键盘的情况下是正常的),经查最后发现是cover层的position被设置为fixed的原因,

fixed是根据浏览器窗口进行定位(此时设置的百分比大小也是相对于窗口大小),所以显示出的cover只是软键盘显示时以上的那一段,解决办法是改用absolute或者通过resize、scroll触发浏览器重绘。

absolute

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

原文地址:https://www.cnblogs.com/flytome/p/3974672.html