iOS 11 Safari bootstrap modal text area outside of cursor

Question

With iOS 11 safari, input textbox cursor are outside of input textbox. We did not get why it is having this problem. As you can see my focused text box is email text input b

Answer 1

As previously mentioned: setting the style.position property of body to fixed solves the iOS cursor misplacement issue.

However, this gain comes at the cost of being forcibly scrolled to the top of the page.

Fortunately, this new UX problem can be negated without much overhead by leveraging HTMLElement.style and window.scrollTo().

The basic gist is to counteract the scroll to top by manipulating the body element's style.top when mounting. This is done using the YOffset value captured by the ygap variable.

From there it's simply a matter of resetting the body's style.top to 0 and reframing the user's view using window.scrollTo(0, ygap) when dismounting.

See below for a practical example.

// Global Variables (Manage Globally In Scope).
const body = document.querySelector('body') // Body.
let ygap = 0 // Y Offset.


// On Mount (Call When Mounting).
const onModalMount = () => {

  // Y Gap.
  ygap = window.pageYOffset || document.documentElement.scrollTop

  // Fix Body.
  body.style.position = 'fixed'

  // Apply Y Offset To Body Top.
  body.style.top = `${-ygap}px`

}


// On Dismount (Call When Dismounting).
const onModalDismount = () => {

  // Unfix Body.
  body.style.position = 'relative'

  // Reset Top Offset.
  body.style.top = '0'

  // Reset Scroll.
  window.scrollTo(0, ygap)

}