当iOS虚拟键盘出现在屏幕上时,是否有已知的解决方法用于在错误的位置渲染固定元素?
我有一个应用程序,它利用WKWebView处理大部分内容。在一些屏幕中,我们在div中有按钮,它利用当iOS虚拟键盘出现在屏幕上时,是否有已知的解决方法用于在错误的位置渲染固定元素?,ios,css-position,fixed,virtual-keyboard,Ios,Css Position,Fixed,Virtual Keyboard,我有一个应用程序,它利用WKWebView处理大部分内容。在一些屏幕中,我们在div中有按钮,它利用位置:fixed以便它们始终位于下面滚动的长表单所在的位置。当显示虚拟键盘时,我向文档体添加了一个类,该类可用于调整其他内容,例如,调整包含这些按钮的div上的bottom属性,使它们移动到键盘上方 到目前为止,很好,它们总是可见的。当表单被滚动时,问题就出现了,按钮明显地随着页面的其余部分向上移动(它们不应该这样做),但浏览器实际上的行为就像它们仍然在应该在的位置一样。屏幕截图显示浏览器认为按钮
位置:fixed代码>以便它们始终位于下面滚动的长表单所在的位置。当显示虚拟键盘时,我向文档体添加了一个类,该类可用于调整其他内容,例如,调整包含这些按钮的div上的bottom
属性,使它们移动到键盘上方
到目前为止,很好,它们总是可见的。当表单被滚动时,问题就出现了,按钮明显地随着页面的其余部分向上移动(它们不应该这样做),但浏览器实际上的行为就像它们仍然在应该在的位置一样。屏幕截图显示浏览器认为按钮所在的位置,如果您触摸这些区域,则按钮将被激活
我很高兴将此记录为WebKit或WKWebView的一个bug,但是否有已知的解决方法,以便它们在正确的位置渲染?我读到,添加一个翻译来触发硬件渲染可能会有所帮助,但它似乎没有完成这里的工作。我还读到,将位置更改为绝对
可以解决这个问题,但对我来说,这只会导致它们被完全渲染到屏幕外的某个地方 您可以将固定位置添加到按钮包装中
.btn-bar-fixed {
position: fixed;
bottom: 0px;
right: 0px;
}
我想知道当键盘存在时是否可以禁用WebView中的滚动。抱歉,如果我听起来很笨,如果您需要在用户键入时滚动webView!是的,有很多表单字段。我想我只是想在键盘可见时隐藏按钮,因为屏幕空间非常有限。使用position:absolute
-让它工作,因为它是唯一可以滚动的“固定”方式抱歉,它不在屏幕截图中,但btn bar fixed就是这样定义的。在键盘出现之前一切正常。