Prevent iOS from handling focus event on an <input>

Question

Given that iOS responds to an <input type='text'> by scrolling / breaking position: fixed , is there a way to stop iOS/Safari from receiving that event? I have tried the countless workarounds to this bug, but none are great for our use case. I do need the input to get a :focus pseudo class still, and calling blur the moment it is focused doesn't quite do the trick, but any other suggestions would be appreciated!

For some background, we have a custom keypad where we hide the iPad keypad (using the property readonly on the inputs) and the keypad is fixed to the bottom of the screen. It works quite well except for when the height of the page is greater than the iPad screen's height, if someone clicks on an input, our custom keypad jumps to the bottom of the page where it cannot be seen. I currently have a workaround in place where we switch to position: absolute , but we have so many pages, it's not ideal / prone to bugs to have to calculate where to position the custom keypad so it appears to be on the bottom of the iPad screen each time. Note I do not need this solution to work on an iPhone/Android.

Answer 1

This has been quite a hack, but it seems to work:

body, html {
    margin: 0;
    overflow: auto;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}

Just add this to your CSS. I needed to remove the margin, not sure if that will affect your design. If so, you might try to add padding instead, but I haven't tried.

The idea is to prevent the html element to scroll, tricking Safari as it seems that it is only attempting to do it in the outer most element.

If the html doesn't scroll, I need to add the scroll back, so I apply it to the body. That makes the scroll to lose the momentum, and to add it back you need that -webkit-overflow-scrolling: touch thing.

So, to be more clear of what is going on, the code should be like this - but I haven't tried it:

html {
    margin: 0;
    overflow: hidden;
    height: 100%
}
body {
    margin: 0;
    overflow: auto;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}