I have in a portal position: fixed; bottom: 0; top: initial; right:0; left: 0; bottomsheet element
which comes up as a click to action. Which has an input box for providing input for login.
When tapped on, it gets focused and the default soft keyboard comes up on the safari and chrome as expected.
On some instances the keyboard comes up the fixed input bottomsheet moves up along with keyboard but on some the keyboard comes over the input bottomsheet hiding it completely.
I tried few things:
- i kept
user-scalable="no"in the viewport meta. - I added
margin-bottom: calc( 20px + env(keyboard-inset-height));but this is not supported on safari but did not work on chrome either. - i added
window.visualViewport.addEventListener('resize', resizeFunction);
in this function i added
(initialVisualViewPortHeight - finalVisualViewPortHeight); // this height as the visible viewport
// added this as the current bottom value of the bottomsheet
But in the third case for few times this hack works just fine enough but in some cases safari also pushed the input box bringing it up into the view and due to this code it also moves up little which introduces extra space in the view overall.
Let me know if i am missing something. Or if there is another thing that i should try.