ios - 当 iOS 虚拟键盘出现在屏幕上时，是否有已知的解决方法可以解决在错误位置渲染的固定元素？

Question

我有一个应用程序利用 WKWebView 处理大部分内容。在一些屏幕中，我们在一个 div 中有按钮，这些按钮可以利用position: fixed;它们始终在同一个位置，因为下面的长表单滚动。当显示虚拟键盘时，我向文档正文添加了一个类，该类可用于调整其他内容，例如，调整bottom包含这些按钮的 div 上的属性，以便它们在键盘上方移动。

到目前为止，一切都很好，它们总是可见的。当表单随后滚动时，问题就出现了，按钮明显地随着页面的其余部分向上移动（它们不应该），但浏览器实际上表现得好像它们仍然在它们应该在的位置。屏幕截图显示了浏览器认为按钮所在的位置，如果您触摸这些区域，按钮就会被激活。

我很高兴将其归为 WebKit 或特别是 WKWebView 的错误，但是否有已知的解决方法，以便它们呈现在正确的位置？我读到添加翻译以触发硬件渲染可能会有所帮助，但它似乎并没有在这里完成工作。我还读到将位置更改为absolute可以解决此问题，但对我而言，这只会导致它们完全被渲染到屏幕之外的某个地方。

标签： ioscss-positionfixedvirtual-keyboard

Answer 1

您可以将固定位置添加到按钮包装器

.btn-bar-fixed {
   position: fixed;
    bottom: 0px;
    right: 0px; 
}