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

74
June 15, 2021, at 10:40 PM

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`;
  }
};
READ ALSO
How do I add a review function to a site

How do I add a review function to a site

So I'm making a site for my sister's fashion companyShe wants to add a review feature so she can see

33
Why can't I use `AnimatedVisibility` in a `BoxScope`?

Why can't I use `AnimatedVisibility` in a `BoxScope`?

I have a layout which looks like this:

74
Compare Elements from Two Dataframe Lists

Compare Elements from Two Dataframe Lists

I need to compare two lists, each from a different data frameIt should be: if element in List 3 is not in List 1 AND element in List 5 is not in List 1 AND element in List 4 IS in List 2, then print the elements in List 3

60
Can sonarlint be used in place of checkstyle?

Can sonarlint be used in place of checkstyle?

I am working on a project which already has sonarqube integratedNow, we want to have a plugin in our local IDE(with some sort of XML) so that everyone in the team can have the same set of rules

62