37

The following happens on Mobile Safari iOS 6.1.2

Steps to reproduce

Create a position: fixed element with an <input type="text"> element inside it.

Actual result

  1. Input - not focused

    The position of the fixed elements is correct when input is not focused.

  2. Input - focused

    When the input is focused, the browser enters a special mode in which it does not update the position of the fixed elements any more (any fixed positioned element, not just the input's parent) and moves the whole viewport down in order to make the input's parent element sit in the center of the screen.

    See live demo: http://jsbin.com/oqamad/1/

Expected result

The position of the fixed elements is always respected.

Fix or workaround?

Any clues as how to force Safari to properly display the fixed elements would be helpful.

I would prefer a workaround which does not involve using position: absolute and setting an onscroll event handler.

Valentin Agachi
  • 368
  • 1
  • 3
  • 6
  • 1
    Remy Sharp made a live video of the bug in action back in May 2012 on iOS 5: http://www.youtube.com/watch?v=lrnvZDwgJRc – Valentin Agachi Mar 04 '13 at 10:13
  • It is an unfixable bug as of now. Fixed positioning is just starting to gain more expected support amongst mobile devices. – okcoker Mar 13 '13 at 04:56
  • You can use js to aling the div to bottom of the page. That's what I did for my footer. Set a timeout function or call the reposition function on the scroll event. – Shouvik Mar 15 '13 at 13:00
  • 5
    2 years later, the issue still persist.... WTF Safari iOS? – Adrian Florescu Jul 10 '15 at 13:52
  • Possible duplicate of several SO questions. See https://gist.github.com/avesus/957889b4941239490c6c441adbe32398#gistcomment-2193547 for details. – Brian Cannard Sep 04 '17 at 23:34
  • @ValentinAgachi , i too have the same prob, did u get any answer https://stackoverflow.com/questions/48662128/input-focused-inside-fixed-element-is-changing-the-position-of-the-element-in-io – Ganesh Putta Feb 07 '18 at 11:19

3 Answers3

8

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;
}
Alessandro Incarnati
  • 7,018
  • 3
  • 38
  • 54
  • Changing from fixed to absolutely will cause a flicker on the screen because the element will no longer be where it's meant to be. – Thilak Rao May 18 '15 at 10:01
  • That's not enough to downvote my answer. You can avoid the flickering in many ways, one of them is adding -webkit-transform: translate3d(0,0,0); to your container. And btw, I replied to this answer 2 years ago, so depending on browser it might not work. – Alessandro Incarnati May 18 '15 at 13:53
  • Is there any modern solution for this problem? – Kosmonaft Apr 27 '17 at 10:45
  • Is there any ES6 solution for this? – mesqueeb Jul 25 '17 at 09:02
1

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!

Community
  • 1
  • 1
JP Illanes
  • 3,665
  • 39
  • 56
0

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

Richard Lailey
  • 61
  • 1
  • 3