Prevent Mobile Safari from Presenting Toolbar When Bottom of Viewport Is Tapped

Prevent Mobile Safari from presenting toolbar when bottom of viewport is tapped

No there is not. You can control the content of your webpage but not the behavior of the safari app.

How might one force-show the mobile Safari bottom nav bar to show programmatically?

I think I may have found an answer. Setting your content to have the following styles:

• height: 100% (allows content to fill the viewport and go beyond the
  bottom)
• overflow-y: scroll (allows you to scroll below the viewport;
  the default value is visible)
• -webkit-overflow-scrolling: touch (to smooth any scroll behavior)

appears to force the iOS menu in Safari to always appear. That way, button clicks will actually work instead of opening up the Safari menu.

Unfortunately, you have to pair this CSS with JavaScript browser detection because it messes up the scrolling on iOS Chrome (also webkit). There's no way to target all versions of iOS Safari only using only CSS.

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

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

Mobile Safari not rendering fixed element outside of viewport unless it has no children

I had a similar issue once. I finally solved it using this rule in the fixed element:

-webkit-transform: translate3d(0,0,0);

Hope it helps you too.

Buttons aligned to bottom of page conflict with mobile Safari's menu bar

I think I may have found an answer. Setting your content to have the following styles:

• height: 100% (allows content to fill the viewport and go beyond the bottom)
• overflow-y: scroll (allows you to scroll below the viewport; the default value is visible)
• -webkit-overflow-scrolling: touch (to smooth any scroll behavior)

appears to force the iOS menu in Safari to always appear. That way, button clicks will actually work instead of opening up the Safari menu. Hope this helps!

---

Related Topics