React-modal: "Flying cursor" on Mobile Safari

[davidmfoley]

Summary:

Tapping an input to focus on it in mobile safari results in the cursor and scroll position jumping to a point some distance below the input, then "flying" up to the input by scrolling.

Steps to reproduce:

1. Visit, in mobile safari: https://reactcommunity.org/react-modal/#examples
2. Select "Use inline styles to style" (or, probably, any other example)
3. Tap in either input field
   

   Expected behavior:

Focus the field without scrolling/flying.

Additional notes:

Tested on iPhone 5S/iOS 9.3.5 and iPhone 7/iOS 10

[tkh44]

This is just a behavior that is going to happen on iOS when using fixed position elements. iOS safari will not re-render fixed position elements on scroll so you get some jank when focusing an input because the page is scrolling around.

You can somewhat get around this by adding transform: translate3d(0px, 0px, 0px) onto the modals styles, but it doesn't always work.

You can see the difference by changing position: fixed to position: absolute on the modal's styles. No more jumping around.

See here for an example: http://stackoverflow.com/questions/32875046/ios-9-safari-changing-an-element-to-fixed-position-while-scrolling-wont-paint

[coder77]

Any news please...

[maxscott]

I don't know how to solve this in a react idiomatic way but I did in ember in what appears to be a related project, hope it helps @coder77 ember-modal-dialog/issues/154