iOS input focused inside fixed parent stops position update of fixed elements
Solution 1
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;
}
Solution 2
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!
Valentin Agachi
Updated on January 30, 2020Comments
-
Valentin Agachi over 4 years
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
-
Input - not focused
The position of the fixed elements is correct when input is not focused.
-
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 anonscroll
event handler. -
-
Thilak Rao almost 9 yearsChanging from fixed to absolutely will cause a flicker on the screen because the element will no longer be where it's meant to be.
-
Alessandro Incarnati almost 9 yearsThat'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.
-
Ivan Durst over 7 yearsCan you provide a code example so we can upvote if it works? Thanks
-
Kosmonaft about 7 yearsIs there any modern solution for this problem?
-
mesqueeb almost 7 yearsIs there any ES6 solution for this?