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.

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.

• javascript
• ios
• css

Share Improve this question Follow asked Oct 18, 2017 at 15:41 JulieJulie 2,01133 gold badges1818 silver badges3232 bronze badges 2

• Can you provide a working demo that reproduces the issue? – Kostas Siabanis Commented Oct 21, 2017 at 21:48
• Dynamical calculate position absolute. Use jQuery and update it's top on scroll. – GramThanos Commented Oct 23, 2017 at 10:55

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4 +50

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;
}