Focusing inputs in modal on IOS jumps around

[linearza]

We are having an issue where, on IOS, when switching between inputs (on the Centered Scrolling demo version) causes the screen to jerk/bounce/refocus everytime. From what I could see it seems to be a webkit issue related to fixed elements on ios - is anyone else having the same problem, and is there a possible solution if so?

I created a demo app here: https://github.com/linearza/modal-dialog

[linearza]

Related webkit issue: https://bugs.webkit.org/show_bug.cgi?id=158276

[maxscott]

I have the same issue, #120, just updated my tiny example repo. Would love to know a way around this issue.

[cspanring]

I just spent my morning on this, reproducing the issue with a MCVE based on the "Centered Scrolling" example.

It seems that changing position: fixed to position: absolute on .centered-scrolling-wrapper is key. The change will require more layout adjustments to make the modal appear properly again, but the awkward "jumps" after focusing inputs on iOS (v11 here) seem to be gone.

[maxscott]

I magically ended up back here after hitting this again-- @cspanring, I think that's right, similar to how it's described in this stackoverflow.

In my case, I needed to apply absolute to both .ember-modal-dialog, ember-modal-overlay:

.ember-modal-dialog, .ember-modal-overlay { position: absolute; }

(And just for the heck of it)
If you are using a translucent overlay, you may want to add overflow: hidden to the body now when a modal is open. One way to do this is in a base ModalDialog class:

modal-base.js

...
didInsertElement() {
  this._super(...arguments);
  $('body').addClass('showing-modal');
},

willDestroyElement() {
  this._super(...arguments);
  $('body').removeClass('showing-modal');
}
...

*.css

body.showing-modal {
    overflow: hidden;
}

At this point, you go back to your mobile browser and discover that many actually ignore overflow descriptors on body, so you can add overflow-x: hidden & position: fixed to the Child element...

body.showing-modal > .ember-view {
    position: fixed;
    overflow-x: hidden;
}

I know this is pretty off-topic from the original post, but after implementing this it feels like a decent amount of effort just to get to a standard place for mobile. I think it could be nice to see a useAbsolutes=true and overflowHidden=true to abstract away these bits and pieces.

[semeleven]

Maybe use https://github.com/willmcpo/body-scroll-lock ?