iOS 8 Page Jumping on Input Focus

Question

On iOS 8's Safari, when I focus on an <input> element, the entire page jumps down suddenly, before returning to its original position. My page layout fills the entire screen and is not intended to be scrolled.

This seems to be the same bug observed here and here, and in this video. The solutions in those situations were for Cordova apps, but I am not building a Cordova app, I am just making a website for Mobile Safari.

I've tried adding html, body { position: fixed; } as suggested here, but that didn't work.

I would try to "disable scrolling" with the ontouchmove suggestion that many people have provided before, but this is not scrolling triggered by the user, it is automatic scrolling.

I've tried adding onfocus="window.scrollTo(0, 0);" as suggested here, but that didn't work, and I wouldn't expect it to given the comment on that answer:

This seems like it should work, but it's not working for me on an iPhone 5S with iOS 8 in Safari. event.preventDefault() in combination with your solution seems like it would definitely work, but I still get the default scrolling behavior. – benny Mar 17 at 17:53

How do I prevent this bounce?

You're going to have to include some code to reproduce the issue. You cannot expect us to comb through a remote link to find the issue, and even if we did the question would not make sense as soon as the pages change. — user4639281
– user4639281, Commented Jul 7, 2015 at 23:06
I understand, I added a link to our webapp which demonstrates the behavior. Currently creating minimal demo so I can post some code. — Jackson Ray Hamilton
– Jackson Ray Hamilton, Commented Jul 7, 2015 at 23:24

Sergi Mulà · Accepted Answer · 2016-01-14 11:48:38Z

Try this, in my case worked:

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

In my case I transform all the fixed element on the web on absolute to fix the problem in iOS when I do a focus on input:

$(document) .on('focus', 'input', function(e) { $('body').addClass('fixfixed'); $('*').filter(function() { return $(this).css("position") === 'fixed'; }).addClass('fixfixed'); }) .on('blur', 'input', function(e) { $('body').removeClass('fixfixed'); $('*').filter(function() { return $(this).css("position") === 'fixed'; }).removeClass('fixfixed'); }); }

The class fixfixed have a position: absolute !important;

I think the first solution for your case it should work

Jackson Ray Hamilton · Accepted Answer · 2019-08-04 22:21:04Z

I discovered the issue was caused by a piece of code we had which was setting the scrollTop of the page to 0 on focus. No wonder!

document.addEventListener('focusin', function (event) { if (event.target.tagName === 'INPUT') { document.body.scrollTop = 0; } });

Simply remove the bottom script and the problem goes away.

Collectives™ on Stack Overflow

iOS 8 Page Jumping on Input Focus

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related