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

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

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.


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

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