iOS 7 Chrome - Il cassetto di posizione fisso non rimane in basso quando viene visualizzata la tastiera virtuale

Question

Ho un cassetto inferiore che è fissato posizionato nella parte inferiore. Quando toccato, il cassetto scorrerà verso l'alto e mostrerà più contenuto. Su iOS 7, quando l'utente tocca il tag di input o il tag textarea, viene visualizzata la tastiera virtuale. Tuttavia, il cassetto si solleva sulla pagina anziché rimanere attaccato al fondo quando viene visualizzata la tastiera. Si prega di vedere lo schema qui sotto per l'illustrazione.

ho innanzitutto incontrato il problema anche su Safari, ma ho aggiunto il seguente codice per modificare la posizione fissa di assoluto quando la tastiera è aperta:

// 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'); 
    }); 
} 

codice CSS:

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

Questa soluzione funziona su Safari su iOS 7 ma non funziona su Chrome. Inoltre, c'è un comportamento estenuato:

Se sulla pagina è presente un tag di input e lo tocco su iPad, la tastiera virtuale si apre e il cassetto salta in alto. Se capita che il cassetto copra il clic su cui ho fatto clic, l'evento click viene effettivamente attivato sul cassetto. Perché?

Come posso risolvere questo problema? (Ho cercato un po 'di tempo, ma come faccio a eseguire il debug di Chrome su iOS?)

Mille grazie per il tuo aiuto!

Aggiornamento

Ho usato il seguente codice per rilevare se è Chrome su iOS 7, in caso affermativo, mi nascondo il cassetto quando la tastiera virtuale è su, e ri-visualizzare il cassetto quando virtuali la tastiera è giù.

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'); 
      }) 
} 

codice CSS:

.chromefixfixed #drawer { 
    display: none; 
} 

Ancora la domanda rimane: come faccio a Chrome su iOS 7 a lavorare come Chrome su Android (senza nascondere il cassetto quando la tastiera è in alto)?

Grazie per l'aiuto!

Answer 1

La posizione fissa inferiore e la posizione assoluta inferiore sono un incubo assoluto su dispositivi iOS e Android, nella mia esperienza non è possibile renderlo uniformemente anche attraverso i dispositivi più moderni, per non parlare dei più vecchi che dominano il mercato attualmente. Tanto che, come dev, chiederei a un designer di ripensare il layout a causa di esso. Credo che si chiami "aggirando lo stronzo".