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:

Is there a way to always show the bar on iPhone X?
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.

Can you please create a stack snippet that reproduce the problem? — Alon Eitan, Jan 23 '18 at 12:46
I know, but like many other people, my corporate proxy is banning the image websites. I'm not ordering him to do it, I'm just asking because I know my way around flexboxes. That's all :) — , Jan 23 '18 at 12:48
related: https://stackoverflow.com/questions/33644584/how-might-one-force-show-the-mobile-safari-bottom-nav-bar-to-show-programmatical — Guy, Jan 23 '18 at 14:14

score 16 · Accepted Answer · answered Jan 23 '18 at 12:58

16

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

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

answered Jan 23 '18 at 12:58

Daniel A. White

187,200
47
362
445

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. – Guy Jan 23 '18 at 13:48
1

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)); }` – Jan Zikmund Jun 26 '19 at 07:18
1

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. – Thomas Higginbotham Mar 01 '21 at 19:20

score 2 · Answer 2 · answered Jan 24 '19 at 17:14

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

score 1 · Answer 3 · answered Jan 23 '18 at 14:00

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.

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

3 Answers3