相关疑难解决方法(0)

我们在iOS上的Mobile Safari(MS)中运行了一个简单的移动应用程序.当用户向下滚动页面n个像素时,"顶部"按钮从底部向上滑动.顶部按钮是固定位置.问题是,当您开始在MS中滚动时,导航和工具栏UI将被隐藏.当您点击"顶部"按钮时,它会显示底部工具栏,点击"顶部"按钮需要第二次点击.有没有办法禁用默认的"点击视口底部显示工具栏"的行为,所以我们的顶部按钮按预期工作(即跳转到页面顶部只需点击一下,而不是两个？

我正在构建一个Web门户,它必须在多个平台上实现功能.
其中一个平台是IOS Safari,这是我遇到的问题.
在我的代码中,我将两个浮动按钮对齐到div的底部,宽度和高度均为100%.
这一切都正常,我的按钮显示的颜色与页面底部的按钮完全相同.
然而,当我点击按钮时,移动safari中的紧凑视图切换到完整视图,我的按钮隐藏在底部导航栏后面!

当用户点击屏幕底部10%时,safari mobile显示扩展菜单是否正常？
我怎么能避免这个？

在这个gif中你可以看到IOS模拟器上的问题:

正如您所看到的,仅当按钮位于视图的较低10%时才会出现问题.这只是一个普通的按钮,我的代码被几个开发人员三重检查,并且没有错误.

我们在网页底部放置了一个固定按钮,使用:

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

更新: 在视觉上应用丹尼尔的建议后,似乎有一个填充.正如我补充的那样:

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

然而,行为仍在继续,需要两次点击.