iOS Smart Banner Causes Bottom Toolbar to Overlap Elements which are Fixed to Bottom of Screen

Question

I have been searching for the best part of a day in order to try and find a way around this but cant. So here I am.

Basically I am working on a component which is position: fixed; to the bottom of the mobile browser's viewport window. This is trivial in itself.

The issue is that the company's native iOS app has an Apple association file which presents the Apple smart banner to open the native app at the top of the page.

When this is presented to the end user it seems that the browser redefines what it classes as the bottom of the page and, as a result, anything which is fixed to the bottom of the page is overlapped by the navigation toolbar which appears.

The only solution I can think of is to write out a list of all Apple mobile device viewport sizes and then compare the size of the window.innerHeight value on the onresize event -- which seems like absolute overkill and still has some nuance in itself.

I have added some screen shots to illustrate the problem and what I would like to achieve.

Thank you in advance to anyone who can assist with this. I have searched through the answers to other questions but they all seem to be people either trying to surface a smart banner or people trying to redirect to their app.

Answer 1

I have managed to find a solution by leveraging the resize event in the document window and then setting the top attribute of the element to window.innerHeight - element.clientHeight .

If there is a better, more performant way of achieving this I would love to still hear the answer but I will, for all intents and purposes, mark this as answered.

On a side note this does feel like a bug in the Safari browser itself as it seems that Apple are altering what they consider to be the bottom of the document.

Solution:

window.onresize = () => {
  const button = document.querySelector(".add-to-bag--sticky");
  if (button) {
    button.style.top = `${window.innerHeight - button.clientHeight}px`;
  }
};