0

iOS seems to be adding extra padding to HTML element when input is focus, even if the entire page says, don't overflow,don't add padding, just don't do anything, iOS is like F**K you!

this is when input is not selected

input not selected

when input is focused

this is probably the 100th post on this topic. codesandbox

2019 and this is still an issue, spend 2 days reading stack overflow and webkit website and nothing to seems to be working.

here is a list of related topics that don't work

position: fixed doesn't work on iPad and iPhone

iOS input focused inside fixed parent stops position update of fixed elements

iOS Safari css position fixed when textarea is focused

iOS iPad Fixed position breaks when keyboard is opened

How do I stop my fixed navigation from moving like this when the virtual keyboard opens in Mobile Safari?

Safari in ios8 is scrolling screen when fixed elements get focus How to stop mobile safari from setting fixed positions to absolute on input focus?

Fixed/absolute positioning neglected in iOS when focusing on input

BardZH
  • 402
  • 2
  • 6
  • 21
  • where is the padding? that just seems to be highlighted – brk Nov 01 '19 at 09:01
  • @brk i've added background colors to `html {red}` and it's by default `0 padding, 0 margin` but when the virtual keyboard shows up on input focus it adds a scroll to the page and that extra padding from `html` tag – BardZH Nov 01 '19 at 09:22
  • @brk the red part should not even be visible in the viewport, since `.app` is full height and width blocking the view on `absolute position` – BardZH Nov 01 '19 at 09:24

1 Answers1

0

Have you tried removing all height properties off the body tag? I had this issue and I removed

    body {
     height: auto; // I removed this and it fixed mine
    }

I would experiment by removing any

    html,
    body {
      margin: 0 !important;
      padding: 0 !important;
      position: relative;
      // height: 100%; // delete this
      // min-height: 100%; // delete this
      font-size: 16px;
      background-color: red;
    }

Also make sure you clear your cache.

homiehomes
  • 1
  • 2