iOS input focused inside fixed parent stops position update of fixed elements

Question

The following happens on Mobile Safari iOS 6.1.2

Steps to reproduce

Create a position: fixed element with an <

Answer 1

Yep, this is specifically an iOS safari issue since v5. If you use Chrome on iOS you'll notice it will work OK. The bodge I use to fix this is to create and add a style element to the body and subsequently delete it and then perform the focus on the element.

Don't ask me why this works, just too many hours of trial and error!

I've also noticed that after the first time this is fixed you don't have to perform the style trick for subsequent fixed positioned elements

Answer 2

It's a well known bug on Safari, both on iPad and iPhone.

A workaround it's to change the position to absolute to all elements set with fixed position.

In case you are using Modernizr you could also target mobile devices this way:

---

jQuery code

---

$(document).ready(function() {

  if (Modernizr.touch) {

      $(document)

        .on('focus', 'input', function(e) {
            $('body').addClass('fixfixed');
        })

        .on('blur', 'input', function(e) {
            $('body').removeClass('fixfixed');
        });

      }

});

---

CSS

---

If I want to target just the header and footer for example, that are set with fixed position, when the class 'fixfixed' is added to the body I can change the position to absolute to all elements with fixed position.

.fixfixed header, .fixfixed footer {
  position: absolute;
}

Answer 3

Position:Fixed has a lot of well known-bugs, you can check them here: Remysharp article. Probably you can still fix some of them using the answers from this question: CSS “position: fixed;” into iPad/iPhone?

Good luck!