How to Resolve Position:Fixed for a Bottom Toolbar on iOS (Iphone/Ipad)

iPhone & iPad position: fixed bottom problem

The reasons this happens is that the iOS browsers use a viewport that moves around the window, that means that fixed position is fixed in regards to the window, but not the viewport. You'll need to position it using JavaScript by checking the current viewport position.

How to solve the issue of position:fixed for a button at the bottom of the screen in iOS (ipad/iphone)?

Try this:

.bottomfixed 
{
   position:absolute;
   top:calc(100vh - (68px + 10px));
  /* 100 viewport height minus the height of the button and the height of the bottom position */
}

instead of this:

.bottomfixed 
{
   position: fixed;
}

Position fixed but not: https://codepen.io/carolmckayau/pen/qJXvGZ

position: fixed doesn't work on iPad and iPhone

I ended up using the new jQuery Mobile v1.1: http://jquerymobile.com/blog/2012/04/13/announcing-jquery-mobile-1-1-0/

We now have a solid re-write that provides true fixed toolbars on the
a lot of popular platforms and safely falls back to static toolbar
positioning in other browsers.

The coolest part about this approach is that, unlike JS-based
solutions that impose the unnatural scrolling physics across all
platforms, our scrolling feels 100% native because it is. This means
that scrolling feels right everywhere and works with touch, mousewheel
and keyboard user input. As a bonus, our CSS-based solution is super
lightweight and doesn’t impact compatibility or accessibility.

iOS 15 minimized address bar issue with fixed position, full screen content

I have recently faced the same problem, when setting the body position to fixed to block scrolling while an overlay is displayed. As soon as the scrolling is disabled, Safari stops rendering the lower area which would be covered by the expanded iOS UI, leaving behind the same black bar as you're showing in your screenshot.

Setting html.style.height to 100vh while the body is set to position: fixed seems to fix the issue.

I have build a simple example page where you can see the difference.
After you open the page, you have to scroll down a little towards the buttons to collapse the Safari UI. Then you can toggle position: fixed or the code-to-fix-error class (to fix the error) by clicking the buttons.

In my example of the scroll blocking:
Setting the height to calc(100vh - 1px) would also prevent the safari native rubber band / elastic scrolling effect while the the popup is active. This change should only be applied to iOS devices tho.

const btnError = document.querySelector('button.error')
btnError
  .addEventListener('click', () => {
    btnError.innerHTML = document.documentElement.classList.toggle('code-to-fix-error')
      ? 'Fix active'
      : 'Fix inactive'
  })

let y = 0
const btnToggle = document.querySelector('button.toggle')
btnToggle
  .addEventListener('click', () => {
    const _doc = document.documentElement
    if (_doc.classList.contains('active')) {
      _doc.style.setProperty('--scroll-y', `0`)
      _doc.classList.remove('active')
      window.scroll(0, y)
      btnToggle.innerHTML = 'position: static'
    } else {
      y = window.scrollY
      _doc.style.setProperty('--scroll-y', `-${y}px`)
      _doc.classList.add('active')
      btnToggle.innerHTML = 'position: fixed'
    }
  })

body {
  padding: 400px 0 0 0;
  margin: 0;
  inset: 0;
  -webkit-text-size-adjust: 100%;
  background-color: #435283;
  text-align: center;
  height: 8000px;
  width: 100%;
}

html.code-to-fix-error.active  {
  height: 100vh;
}

html.active body {
  top: var(--scroll-y);
  overflow: hidden;
  position: fixed;
}

button {
  appearance: none;
  line-height: 30px;
  padding: 0 10px;
  background-color: #FFF;
  color: #435283;
  border-radius: 3px;
}

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1, viewport-fit=cover">
    <meta name="theme-color" content="#000000">

    <style>/* styles here */</style>
  </head>
  <body>
    <button class="error">Fix inactive</button>
    <button class="toggle">position: static</button>
    
    <style>/* script here */</style>
  </body>
</html>

Safari Viewport Bug, Issues with Fixed Position and Bottom or Top

Hello this question kind of got me at first and I thought back to my days poking around in HTML and CSS for hours on end trying to get things right. Alas all those hours of missery have been for this moment.

vh used to be calculated by the current viewport of your browser. If you loaded a site in your browser, 1vh would be the same as 1% of your screen height, and then minus the browser interface.

But! If you wanted to scroll, it gets tricky. Once you brush past the browser interface (in this case your address bar), you would have a wierd jump in your content because the vh would be updated.

Safari for iOS was actually was one of the first to implement a fix. They set a fixed vh value based on the max screen height. Then the user wouldn't experience the jump in content, but .... yup, there's always a but...

Having the fixed value is awesome, except when you wanna have a full sized element, or an element with fixed position at the bottom of the screen because then it would get cropped out!

That is your problem....and say goodbye to it, because...

This is your solution!!

css:

.my-element {
  height: 100vh; /* This is for browsers that don't support custom properties */
  height: calc(var(--vh, 1vh) * 100);
}

js:

// Get the viewport height and multiply it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then set the custom --vh value to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

Now you can use --vh as your height value like we would any other vh unit, multiply it by 100 and you have the full height we want.

One thing left, the js up there runs, but we never update the element's size when the viewport changes, so that wouldn't work yet, you need a listener...

more js:

// We listen to the resize event
window.addEventListener('resize', () => {
  // Update the element's size
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});

Cheers!

Div bottom toolbar appearing on iPhone but not on Android

If add {left: 0} can't solve it, I guess maybe the parent node of .sidebar-nav-right have the transform; then the position origin has been reset.