Windows touch键盘覆盖了Web应用程序的输入。我该怎么办？

Question

我有一个Web应用程序，它显示一个以视口为中心的弹出对话框。在iOS上，弹出窗口与触摸键盘很好地交互 - 当键盘处于活动状态时，用户可以滚动以触及弹出窗口中的所有输入。在平板电脑模式的Windows 10上，触摸键盘覆盖屏幕的下半部分，对话框中的许多输入都无法访问。当键盘处于活动状态时，无法在屏幕上滚动输入，这意味着用户无法看到输入，也无法输入文本。

如何在Windows上获得iOS风格的行为？

Here is a demo显示了有问题的行为。 （我们正在开发的实际应用是一个使用Chrome作为渲染引擎的node-webkit应用。）

iOS行为：您可以滚动到弹出窗口的底部，也可以看到背景图片的底部。

Windows行为：屏幕键盘覆盖弹出窗口底部的所有输入。无法访问输入5到8。

这是背景和模态的相关CSS。在codepen中还有更多的CSS：

.background {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(http://placebear.com/g/1024/768);
  background-color: #ddd;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.modal {
  border: 2px solid #999;
  background: rgba(200, 200, 200, 0.85);

  padding: 30px 20px;
  width: 300px;

  overflow-y: scroll;

  position: absolute;
  top: 10%;
  bottom: 10%;
}