我有一个移动网络应用程序，它在一个位置显示一个对话框：覆盖整个屏幕的固定元素。无论显示多少内容或页面滚动了多远，覆盖元素都会使页面内容变暗，并且对话框会出现在所有内容之上。对话框中有一个<input type="search />字段。
在 Android 上，当用户点击输入字段以使其获得焦点时，通常（但并非总是）会出现一些非常不稳定的行为：
- 软键盘出现，然后立即消失。
- 底层页面（被覆盖层覆盖）滚动几十个像素，有时向上，有时向下，有时双向，有时重复。当输入字段失去焦点时也会发生这种情况。
- 覆盖元素会瞬间向下和向右移动几个像素，显示屏幕顶部和左侧边缘的底层内容。（它在不到一秒后返回原位。）
这是在带有内置浏览器的 Android 2.3.4 上。它也可能出现在其他 Android 版本上。
页面构造如下：（请记住，其中一些怪癖仅在页面包含足够的内容以允许滚动时才会出现。）
<head>
<style type="text/css">
#menuoverlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
background-color: rgba(0,0,0,.75);
text-align: center;
}
#menu {
display: inline-block;
margin-top: 1em;
border: 3px solid #02b;
border-radius: 8px;
padding: 1ex;
background-color: black;
color: silver;
}
</style>
</head>
<body>
<div id="menuoverlay">
<div id="menu">
...menu items...
...menu items...
<form action=""><input type="search"/></form>
</div>
</div>
<div id="content">
...lots of stuff...
...lots of stuff...
...lots of stuff...
</div>
<body>
有没有其他人看到过这种行为？你找到预防的方法了吗？
在网上搜索让我看到了一些类似问题的报告。以下是我到目前为止所读内容的摘要：
- 在许多 Android 设备上，内置浏览器显然没有像人们期望的那样使用 WebKit 的输入字段。相反，当 html 定义的字段获得焦点时，浏览器会尝试用它单独创建的新文本小部件覆盖它们。
- 这些重复的文本字段通常会忽略 css 样式，从而产生一种效果，即字段看起来是样式化的，直到它们获得焦点，然后突然恢复为系统默认样式。
- Android 浏览器经常无法正确定位这些重复字段。当错位时，它们有时是可见的，但有时仅移动焦点目标而没有任何视觉指示它们已移动。
transform: translate3d()当输入字段的祖先元素具有、-webkit-backface-visibility或等样式时，通常会出现这些问题position: fixed。
以下是一些相关链接：