iPhone X Safari fixed button on bottom needs two clicks to respond

Question

We've placed a fixed button on the bottom of the webpage using:

.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>

It works with Safari and Chrome on all devices. However, on iPhone X, after you scroll down and try to click the button it first shows the bar:

and only then the fixed button is clickable. This means users need to click twice, hence it can potentially reduce the conversion rates. We are wondering:

1. Is there a way to always show the bar on iPhone X?
2. Is there a way to allow a click on the first try?

UPDATE: After applying Daniel's suggestion visually there seems to be a padding. As I've added:

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

Nevertheless, the behavior continues and two click are required.

Solution 1

According to this site, use env(safe-area-inset-bottom) for additional padding:

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

Solution 2

As Daniel A. White suggests, using...

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

is correct, however an additional step mentioned in his link requires you to also use 'viewport-fit=cover' to support this.

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

Solution 3

The bar that comes when you do the first click is a Safari native element which cannot be manipulated by a website.

Possible workaround is to increase your buttons size to a larger size so it is clicked on the first try (mostly) in addtion to Daniel's tipp.

Comments

[Philipp Mochine]

eventbrite.com/engineering/mobile-safari-why

[Guy]

Great! Looks like this might be the right direction, updated the question as we're still experiencing the one-click-shows-bar-second-click-clicks-button behavior.

[Ziki]

I just made the bottom padding twice the size and now only single tap is needed. The downside is that the button area had some extra space at the bottom but I assume we can live with that: .CTA-container { padding-bottom: calc(2 * env(safe-area-inset-bottom)); }

[Thomas Higginbotham]

I am also noticing that env(safe-area-inset-bottom) needs to be doubled to solve the problem. Unfortunately, this results in far too much space at the bottom of the viewport to be useful.