iOS Safari Ignores Body Overflow: Hidden when Input Focused

Published

It appears that on iOS 14.5 in Safari (haven’t tested in Chrome), overflow: hidden is ignored if the user is focused in an input field. Now, you can add a touch-action: none to the body element and that works in some situations, but it’s a hack (it doesn’t actually disable scrolling) and that attribute is also ignored if there’s a child element with overflow: auto AND is not scrollable. The issue is easily replicate-able:

  1. Open the following code in an iOS Safari window:
body,
html {
  touch-action: none;
  overflow: hidden;
}

.test {
  height: 100000px;
}

.test-inner {
  overflow: auto;
  height: 400px;
  width: 100%;
}
<div class="test">
  <div class="test-inner">
    <input type="text">
  </div>
</div>

(note: adding height: 100% to body makes no difference)

  1. Try to scroll by dragging in the green div area and you’ll notice that you can’t because the overflow: hidden is behaving as expected.
  2. Tap into the input field to focus it and you’ll notice that you now can scroll as if overflow: hidden and touch-action: none is now being totally ignored.

Has anyone else run into this issue? If so, have you found a non-JS solution to it?

Source: Ios Questions

Published
Categorised as css, html, ios, javascript, mobile-safari Tagged , , , ,

Answers

Leave a Reply

Your email address will not be published. Required fields are marked *

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq