How to Stop Mobile Safari from Setting Fixed Positions to Absolute on Input Focus

const button = document.getElementById("button");
const input = document.getElementById("input");
const height = window.visualViewport.height;
const viewport = window.visualViewport;

window.addEventListener("scroll", () => input.blur());
window.visualViewport.addEventListener("resize", resizeHandler);

function resizeHandler() {
    if (!/iPhone|iPad|iPod/.test(window.navigator.userAgent)) {
      height = viewport.height;
    }
    button.style.bottom = `${height - viewport.height + 10}px`;
  }

function blurHandler() {
  button.style.bottom = "10px";
}

html,
body {
  margin: 0;
  padding: 0;
}

#button {
  position: fixed;
  width: 100%;
  bottom: 10px;
  background-color: rebeccapurple;
  line-height: 40px;
  text-align: center;
}

<input type="text" inputmode="decimal" value="0.99" id="input" onblur="blurHandler()" />
<div id="button">Button</div>

Safari in ios8 is scrolling screen when fixed elements get focus

This is now fixed in iOS 10.3!

Hacks should no longer be needed.

Prevent iOS from handling focus event on an input

This has been quite a hack, but it seems to work:

body, html {
    margin: 0;
    overflow: auto;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}

Just add this to your CSS. I needed to remove the margin, not sure if that will affect your design. If so, you might try to add padding instead, but I haven't tried.

The idea is to prevent the html element to scroll, tricking Safari as it seems that it is only attempting to do it in the outer most element.

If the html doesn't scroll, I need to add the scroll back, so I apply it to the body. That makes the scroll to lose the momentum, and to add it back you need that -webkit-overflow-scrolling: touch thing.

So, to be more clear of what is going on, the code should be like this - but I haven't tried it:

html {
    margin: 0;
    overflow: hidden;
    height: 100%
}
body {
    margin: 0;
    overflow: auto;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}

iOS 10 Safari: Prevent scrolling behind a fixed overlay and maintain scroll position

Add -webkit-overflow-scrolling: touch; to the #overlay element.

Then add this JavaScript code at the end of the body tag:

(function () {
  var _overlay = document.getElementById('overlay');
  var _clientY = null; // remember Y position on touch start

  _overlay.addEventListener('touchstart', function (event) {
    if (event.targetTouches.length === 1) {
      // detect single touch
      _clientY = event.targetTouches[0].clientY;
    }
  }, false);

  _overlay.addEventListener('touchmove', function (event) {
    if (event.targetTouches.length === 1) {
      // detect single touch
      disableRubberBand(event);
    }
  }, false);

  function disableRubberBand(event) {
    var clientY = event.targetTouches[0].clientY - _clientY;

    if (_overlay.scrollTop === 0 && clientY > 0) {
      // element is at the top of its scroll
      event.preventDefault();
    }

    if (isOverlayTotallyScrolled() && clientY < 0) {
      //element is at the top of its scroll
      event.preventDefault();
    }
  }

  function isOverlayTotallyScrolled() {
    // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions
    return _overlay.scrollHeight - _overlay.scrollTop <= _overlay.clientHeight;
  }
}())

---

Related Topics