iOS 7 Chrome - Die Schublade mit fester Position bleibt nicht unten, wenn das virtuelle Tastenfeld erscheint

Question

Ich habe eine untere Schublade, die unten fest angebracht ist. Wenn Sie auf tippen, wird die Schublade nach oben geschoben und zeigt mehr Inhalt. Wenn Benutzer auf iOS 7 auf Eingabe-Tag oder TextArea-Tag tippen, wird die virtuelle Tastatur angezeigt. Allerdings springt die Lade auf der Seite hoch, anstatt auf dem Boden zu bleiben, wenn die Tastatur auftaucht. Bitte beachten Sie die Abbildung unten zur Veranschaulichung.

begegnete ich zunächst das Problem auch auf Safari, aber ich hinzugefügt, um den folgenden Code die feste Position auf absolute zu ändern, wenn Tastatur geöffnet ist:

// Apple.Device detects if it is an apple device 
if (Modernizr.touch && Apple.Device) { 
    /* cache dom references */ 
    var $body = jQuery('body'); 

    /* bind events */ 
    $(document) 
    .on('focus', 'input, textarea', function(e) { 
     $body.addClass('fixfixed'); 
    }) 
    .on('blur', 'input, textarea', function(e) { 
     $body.removeClass('fixfixed'); 
    }); 
} 

CSS-Code:

.fixfixed #drawer { 
    bottom: 0; 
    margin-left: auto; 
    margin-right: auto; 
    position: absolute; 
    left: 0; 
    right: 0; 
} 

Dieser Fix funktioniert unter Safari auf iOS 7, funktioniert jedoch nicht in Chrome. Außerdem gibt es ein verrücktes Verhalten:

Wenn es ein Eingabe-Tag auf der Seite gibt und ich auf dem iPad darauf tippe, dann öffnet sich die virtuelle Tastatur und die Schublade springt hoch. Wenn die Schublade dann den angeklickten Gegenstand bedeckt, wird das Klick-Ereignis tatsächlich auf der Schublade ausgelöst. Warum das?

Wie kann ich dieses Problem beheben? (Ich habe eine Weile gesucht, aber wie debugge ich Chrome auf iOS?)

Vielen Dank für Ihre Hilfe!

aktualisieren

ich den folgenden Code verwendet haben, um herauszufinden, ob es Chrome auf iOS 7 ist, wenn ja, ich die Schublade verstecken, wenn die virtuelle Tastatur nach oben ist, und erneut angezeigt werden, die Schublade, wenn virtuelle Die Tastatur ist ausgeschaltet.

function iOSversion() { 
    if (/iP(hone|od|ad)/.test(navigator.platform)) { 
     // supports iOS 2.0 and later: <http://bit.ly/TJjs1V> 
     var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/); 
     return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)]; 
    } 
} 

var iosVersion = iOSversion(); 

if (navigator.userAgent.match('CriOS') && iosVersion[0] == '7') { 
    $(document).hammer().on('tap', 'input, textarea', function(e) { 
      $('body').addClass('chromefixfixed'); 
     }) 
      .on('blur', 'input, textarea', function(){ 
       body.removeClass('chromefixfixed'); 
      }) 
} 

CSS-Code:

.chromefixfixed #drawer { 
    display: none; 
} 

Noch bleibt die Frage: wie bekomme ich Chrome auf iOS 7 wie Chrome auf Android arbeiten (ohne die Schublade versteckt, wenn Tastatur nach oben ist)?

Danke für die Hilfe!

Answer 1

Position fixed bottom und position absolute bottom sind ein absoluter Albtraum auf iOS- und Android-Geräten, meiner Erfahrung nach ist es einfach nicht möglich, es gleichmäßig über die modernsten Geräte zu rendern, ganz zu schweigen von den älteren, die den Markt dominieren zur Zeit. So sehr, dass ich als Entwickler einen Designer bitten würde, das Layout zu überdenken. Ich glaube, es heißt "den Turd umgehen".