Creating a "Sticky" Fixed-Position Item That Works on iOS Safari

Creating a sticky fixed-position item that works on iOS Safari

Answering my own question. iOS7 now support position:sticky
Demo: http://html5-demos.appspot.com/static/css/sticky.html

Safari position:sticky not working in an overflow:auto element

I got this solution from someone else:

http://cssdeck.com/labs/bu0nx69w

Basically, instead of position:sticky, use position:fixed for the right panel. The key is to also you will-change:transform in a parent div (in the above example, in .modal-content) so position:fixed becomes fixed relative to that parent, and not the viewport. It's a neat little trick

How to make fixed-content go above iOS keyboard?

We can use VisualViewport to calculate keyboard height. So we can set fixed-content pos correct.

Small demo: https://whatwg6.github.io/pos-above-keyboard/index.html

Code snippet:

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>

Why is my position:sticky not working on iOS?

I feel like an idiot for answering my own question, but I figured out what is causing the problem.
I hope this will help developers facing the same problem because I could not find anywhere defining this behavior.

As you can see, in my code, there is a wrapper (specifically a link) around the element, on which I use my position:sticky:

<a href="#" class="jobAlertToggle">
<div id="jobalarm_mobile">
    <i class="fa fa-bell"></i>
    <span>Jobalarm aktivieren</span>
    <label class="switch">
        <input type="checkbox">
        <span class="slider round"></span>
    </label>
</div>
</a>

For some reason, this is not a problem for Chrome or Firefox on Desktop as well as Android, as they seem to ignore this container, probably because it doesn't define any positioning behavior. This is why it works on other devices. However, iOS does not ignore the container and therefor positions the div relative to its parent container, which is the link. After removing the link for test purposes, it worked on all devices.

Fixed positioning in Mobile Safari

iOS 5 has support for position:fixed.

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.

---

Related Topics