垂直翻译的滚动div中的文本输入对键盘输入反应奇怪

Question

我在已翻译的垂直滚动div中遇到文本输入问题。

在webkit浏览器中，查看此简化示例：

http://jsfiddle.net/ZbguJ/3/

滚动到div的底部，单击文本框，然后按键盘按钮。 div向上滚动到顶部，并且不显示聚焦输入。期望的行为是div不应该滚动，并且用户可以继续不受阻碍地输入文本。

这几乎就好像浏览器正在确定div应该滚动到哪里而不考虑翻译。

任何可能的解决方法？

在实际应用中，有问题的元素使用translate来动画显示在屏幕上。用'top'属性上的CSS动画替换translate会严重影响动画的平滑度，但会解决滚动问题。

Answer 1

简单回答：不要使用translate。请改用margin-top和margin-left。通过取消转换并添加

，我可以让你的小提琴工作

margin-top: -200px;

Answer 2

今天早上在洗澡后想到了解决方法。

将滚动内容包装在父div中，正常翻译父div，将滚动div翻译为与父div相等且相反，并将top或margin-top设置为父翻译量以正确对齐内部div。请参阅此小提琴中的更新示例：http://jsfiddle.net/ZbguJ/5/

#Parent {
    -webkit-transform: translate(0, -200px); /* animated */
}
#Child { 
    -webkit-transform:  translate(0, 200px);
    top: -200px;
    position:relative;
}

愚蠢，但它完成了工作。