Android 2.3 WebView bug 之 position:fix

最近在 Android 2.3 上做一个小应用，native / web 混合，用了一个 WebView 做内容主要显示区域。用了 jQuery Mobile 的列表和内置的搜索功能。那个搜索框在列表最顶端，当列表向上卷动的时候，搜索框会跟随一起卷动出屏幕顶端。客户看了 demo，表示「这个东西很好啊，要是能停留在顶部就更好了」。之后发生的事情如下：

1、设置 position:fix 以及修正各种 CSS margin / padding / top，确保这个东西……固定在页面顶部显示。

Chrome 测试成功，iPhone 测试成功，Android WebView、Android 内置浏览器均失败。

2、搜索 Android browser fix top，看到 http://bradfrostweb.com/blog/mobile/fixed-position/ 说：必须禁止用户缩放。

于是添加 

<meta name="viewport" content="width=device-width, user-scalable: no"> 

测试，仍然可以缩放。

3、继续搜索，看到 http://garrows.com/?p=337 的代码，去除无脑重复部分，代码如下：

<meta name='HandheldFriendly' content="True"/>
<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' />

缩放被禁止了。卷动列表后搜索框成功置顶。

4、让我稍微卷动一下，再点一下输入框看看……

亲爱的输入框就这样魂飞天外了。下面那个光标闪烁的，看起来像是输入框的地方根本无法获得焦点，而卷动再多一点，可以接受焦点的那个白条就再也找不到了。

5、结论

...

iOS 真好，嗯。

以上。