iPhone X Safari 底部固定按钮需要点击两次才能响应

Question

我们在网页底部放置了一个固定按钮：

.CTA-container {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    height:50px;
    background-color:#333;
  }
  
 a {
    font-size:20px;
    color:white;
    font-weight: bold;
    text-decoration: none;
    font-family: 'ProximaNova', tahoma, sans-serif;
    display: block;
    height:50px;
    line-height: 50px;
    text-align: center;
  }

<div class="CTA-container">
    <a href="https://www.google.com">
        Download Our App <span>????</span>
    </a>
</div>

它适用于所有设备上的 Safari 和 Chrome。但是，在 iPhone X 上，向下滚动并尝试单击按钮后，它首先会显示该栏：

只有这样固定按钮才可以点击。这意味着用户需要点击两次，因此可能会降低转化率。我们想知道：

1. 有没有办法在 iPhone X 上始终显示该栏？
2. 有没有办法允许在第一次尝试时点击？

更新： 在视觉上应用丹尼尔的suggestion 之后，似乎有一个填充。正如我所补充的：

   .CTA-container {
        margin-bottom: env(safe-area-inset-bottom);
    }

尽管如此，行为仍会继续，并且需要两次单击。

Answer 1

正如 Daniel A. White 建议的那样，使用...

.CTA-container {
    padding-bottom: env(safe-area-inset-bottom);
}

是正确的，但是在他的链接中提到的附加步骤要求您还使用“viewport-fit=cover”来支持这一点。

<meta name="viewport" content="width=device-width, viewport-fit=cover">

Answer 2

第一次单击时出现的栏是 Safari 原生元素，网站无法对其进行操作。

可能的解决方法是将您的按钮大小增加到更大的大小，以便在第一次尝试时（大多数情况下）点击它，以添加 Daniel 的提示。

Answer 3

According to this site，使用env(safe-area-inset-bottom) 进行额外填充：

.CTA-container {
  padding-bottom: env(safe-area-inset-bottom);
}