11

To try it:

  1. Open this codepen in Safari 12 on iOS (device or simulator).
  2. Focus the input. The virtual keyboard should open.
  3. Now scroll all the way to the bottom of the page.
  4. You should be able to overscroll outside of the <html> element and see a white stripe the size of the Safari menu/action bar like so:

demo

  1. When you close the virtual keyboard, the stripe goes way...

Is this a bug with Safari? Any way to fix this?

Alex Nault
  • 613
  • 7
  • 23
  • 1
    I've been having this same issue! Couldn't find a solution... did you manage to fix it? – sammiepls Oct 31 '18 at 09:12
  • 1
    No unfortunately... From my understanding, it sounds like a problem with Safari itself. I'm surprised this problem didn't get more attention. It looks pretty major if you ask me. – Alex Nault Oct 31 '18 at 21:29
  • 1
    I've also run into this problem, and it's really throwing me for a loop. I also think that it is a Safari bug that apple doesn't want to acknowledge. Did you ever find any further evidence? Anything in writing that give evidence that Apple is aware of this? – Fopedush May 30 '22 at 21:34

1 Answers1

0

First of all, you may try using height: 100vh; instead of height: 100%. Since the and tags do not specify the height value, and height % is based on it's parent, you cannot directly apply percentages as height value. So, you could try

html, body {
  height: 100vh;
}

If the above approach doesn't work. You might just try to hide the overflow from the body using overflow: hidden; in your body

SamiunNafis
  • 142
  • 2
  • 10