如何在响应式设计中管理固定的底部按钮

Question

我正在为网站开发响应式设计。 DA（艺术总监）希望在视口底部放置一个动作按钮。

此按钮必须始终显示给用户。

我正在应用固定的底部CSS样式：

.mobile {
  position: fixed;
  bottom: 0;
  left: -50%;
  width: 75%;
  transform: translate(-50%, -50%);
}

在iOS上

显示Safari工具栏时该按钮处于隐藏状态，但不应显示

当工具栏被隐藏并且按钮可见时，我无法单击它。

此工具栏的高度取决于所使用的iPhone版本。

您是否有一些CSS技巧或其他想法可以解决这种情况？