iOS平台WebView中元素fixed失效的问题

image

1、移动端并不会都使用原生开发，有时候会简单粗暴地在Android和iOS中提供一个activity或viewController，然后在里面显示一个满屏的WebView，在WebView里加载某一个网页的内容即可，这个要加载的网页就可以交给其他人去开发了。

2、一般而言，如果网页布局简单，没有使用浮动定位等属性的话，基本不会出问题。但好死不死，很多时候用个position:fixed之类的把输入框固定在底部是十分常见的。但就是这个属性导致兼容出了问题。

3、既然说是兼容出了问题，那也就是说有的正常。而不正常的就出在iOS平台中。原因简单一句话就是iOS在获取到你准备输入的时候会让相关的fixed失效，这样iOS就可以把输入框按照它的计算上下移动正好放在软键盘上面。

4、如果故事仅仅到了这里，那么出现的问题最多就是软键盘弹起，滚动页面时输入框相关的fixed失效导致也随页面一起滚动了。但好死不死，假如你在iOS的微信端打开网页的话，会惊奇的发现，有时候软键盘收起的时候，输入框透明了，是的，透明了，而不是消失了，也就是说，你如果在相应的底部位置点击的话，它还会获取焦点弹出键盘甚至又不透明了。

5、这暂时原理还不清楚，但应该和上面iOS对浏览器的处理是有关系的。

6、可能的做法就是，尽量使用absolute代替fixed，并且在弹起键盘的时候不让用户滚动页面，言外之意就是在相关的元素身上增加名字叫touchmove的addEventListener()事件，监听到了滚动就收起键盘，变成满屏滚动页面。这也是一种妥协吧，因为如果用户说我就要弹出键盘的时候滚动上面区域啊，那，容我再想想。

1668061fb661dcc5.jpg