I am working on a form having a fixed header(for action buttons) and have encountered different behavior in iOS(both Safari and Chrome). The problem is that the OS is pushing entire web-view up whenever the keyboard opens, hiding the header which should be always visible.
Tried few solutions 1, 2(the JavaScript/jQuery part) and few other similar options. None of them solve this properly. I can't use native/hybrid support as mentioned here.
Below is what I have tried -
Default behavior - The view scrolls up, hiding the header
After scroll override - The UI jumps on every click on input/textarea and header also hides sometimes.
// tried code to override iOS push behaviour
$("body").on("focus", "input, textarea", function(event) {
event.stopPropagation(); // this can be ignored
let winScroll = window.scrollY;
window.scrollTo({
top: winScroll
});
});
Is there any way to keep the header always visible and fixed at top and rest of view may scroll, just like in browsers(not iOS)? Code to replicate this behaviour with full-page view.
