Comment réparer le déplacement de la navigation dans Mobile Safari avec un clavier virtuel ?

Déplacement de navigation fixe dans Mobile Safari avec clavier virtuel

Mobile Safari rencontre souvent des complications avec des éléments fixes, en particulier lorsqu'un clavier virtuel recouvre un champ de saisie dans la navigation. Comme observé, la navigation se déplace brusquement vers un emplacement inattendu, perturbant son comportement prévu.

Pour résoudre ce problème, envisagez les solutions suivantes :

1. Bascule fixe à absolu

Cette méthode alterne dynamiquement la position des éléments fixes en absolu lorsqu'une entrée obtient le focus et les rétablit en fixe en cas de perte de focus.

<code class="CSS">.header { 
    position: fixed; 
} 
.footer { 
    position: fixed; 
} 
.fixfixed .header, 
.fixfixed .footer { 
    position: absolute; 
} </code>

<code class="JavaScript">if ('ontouchstart' in window) {
    /* cache dom references */ 
    var $body = $('body'); 

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

Solutions alternatives :

Explorez les solutions fournies sur le lien ci-dessous. Ces suggestions offrent des résolutions potentielles pour ce bug particulier de Safari mobile.

[Correction de la position corrigée dans Mobile Safari](http://dansajin.com/2012/12/07/fix-position-fixed/)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!