底部的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. 有没有办法允许点击第一次尝试？

更新 在视觉上应用Daniel suggestion之后，似乎有一个填充。我已经补充说：

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



然而，行为仍在继续，需要两次点击。

Answer 1

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

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

Answer 2

第一次点击时出现的栏是Safari原生元素，网站无法操作。

可能的解决方法是将按钮大小增加到更大的尺寸，这样就可以在第一次尝试时点击（大部分）添加到Daniel的tipp中。

Answer 3

如丹尼尔·A·怀特（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">