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

html css safari mobile-safari iphone-x
Guy picture Guy · Jan 23, 2018 · Viewed 10.8k times · Source

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

fixed button #1

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:

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);
    }

with padding on iPhone X

Nevertheless, the behavior continues and two click are required.

Answer

Daniel A. White picture Daniel A. White · Jan 23, 2018

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

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

Related questions

Text input field doesn't work in safari

I can't figure out why, but for some reason my text input fields don't work in safari (any version, as far as I can tell). Users can't type into the text boxes. I'm at a loss here, since it works …

Read More
How do I make flex box work in safari?

How do I make flex boxes work in Safari? I have a responsive nav that uses a CSS flex box to be responsive and for some reason it won't work in Safari. Here is my code: http://jsfiddle.net/cyberjo50/…

Read More
Disabled input text color

The simple HTML below displays differently in Firefox and WebKit-based browsers (I checked in Safari, Chrome and iPhone). In Firefox both border and text have the same color (#880000), but in Safari the text gets a bit lighter (as if it …

Read More