Android n'est pas correctement défiler sur le focus d'entrée si pas de l'élément de corps

Lorsqu'un navigateur mobile apporte un clavier, il essaie de déplacer les barres de défilement, de sorte que l'entrée est toujours en vue.

Sur iOS Safari, il semble pour ce faire correctement, en trouvant les plus proche défilement parent.

Sur natif Android ou Chrome navigateur mobile il semble tout simplement essayer de l'élément body, puis renonce, de ce fait la concentration d'entrée est caché sous le clavier.

 Comment casser

Ensemble overflow-y: hidden sur l'élément body. Créer un défilement récipient et mettre un forme.

Lorsque vous sélectionnez un élément près du bas de votre écran, il sera obscurcie par le clavier.

Démo

http://dominictobias.com/android-scroll-bug/

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>Android scroll/focus bug</title>
    <style>
    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
    }
    .scroll {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow-y: scroll;
    }
    input {
        margin-bottom: 20px;
        width: 100%;
    }
    </style>
</head>
<body>

    <div class="scroll">
        <input type="text" value="Input 1">
        <input type="text" value="Input 2">
        <input type="text" value="Input 3">
        <input type="text" value="Input 4">
        <input type="text" value="Input 5">
        <input type="text" value="Input 6">
        <input type="text" value="Input 7">
        <input type="text" value="Input 8">
        <input type="text" value="Input 9">
        <input type="text" value="Input 10">
        <input type="text" value="Input 11">
        <input type="text" value="Input 12">
        <input type="text" value="Input 13">
        <input type="text" value="Input 14">
        <input type="text" value="Input 15">
        <input type="text" value="Input 16">
        <input type="text" value="Input 17">
        <input type="text" value="Input 18">
        <input type="text" value="Input 19">
        <input type="text" value="Input 20">
    </div>

</body>
</html>

Toutes les idées de comment résoudre ce problème? Aurez-vous besoin de certains détection du navigateur et de désordre de hacks?

Pour info <div class="scroll">

OriginalL'auteur Dominic | 2014-05-20