jeudi 26 avril 2018

iOS keyboard webview gap

When showing a chat input in iOS, opening the keyboard creates a gap between the bottom of the chat input and the keyboard. Different keyboards (e.g. SwiftKey) produce different size gaps. Code:

<html style="height:100%; background: green;">
    <body style="position: relative; background: purple; height: 100%; margin: 0;">
        <div style="background: red; border: 2px dashed yellow; width: 100%; height: 100%; position: relative;">
            <div contentEditable="true" style="background: pink; width: 100%; height: 60px; position: absolute; bottom: 0;">
            </div>
        </div>
    </body>
</html>

I've created a JS Fiddle to check the result: https://jsfiddle.net/7700LmLd/3/embedded/ I've tested this on an iPhone 5s, anyone know of some way to prevent this? In some contexts it results in even worse issues, like the input ending up underneath the keyboard, making it unusable.

Thanks in advance for any hints, PV




Aucun commentaire:

Enregistrer un commentaire