iOS iPad La position fixe se casse lorsque le clavier est ouvert

Question

La position fixe se casse sur l'en-tête lorsque je clique sur la zone de texte "Formulaire de recherche". Il se détache simplement du haut de la page (comme il est fixé là-haut) et commence à flotter au milieu de la page lorsque le clavier virtuel s'ouvre.

Ordinaire:

Cassé:

Answer 1

J'aime vraiment cette solution (http://dansajin.com/2012/12/07/fix-position-fixed/). J'ai emballé le tout dans un petit plugin jQuery donc je pourrais:

• Définir le parent qui obtient la classe
• Définir les éléments qui cela s'applique à (ne pas oublier le "textarea" et "select").
• Définir ce que le parent nom de la classe est
• Lui permettre d'être enchaîné
• Lui permettre d'être utilisé plusieurs fois

Exemple de Code:

$.fn.mobileFix = function (options) {
    var $parent = $(this),
    $fixedElements = $(options.fixedElements);

    $(document)
    .on('focus', options.inputElements, function(e) {
        $parent.addClass(options.addClass);
    })
    .on('blur', options.inputElements, function(e) {
        $parent.removeClass(options.addClass);

        // Fix for some scenarios where you need to start scrolling
        setTimeout(function() {
            $(document).scrollTop($(document).scrollTop())
        }, 1);
    });

    return this; // Allowing chaining
};

// Only on touch devices
if (Modernizr.touch) {
    $("body").mobileFix({ // Pass parent to apply to
        inputElements: "input,textarea,select", // Pass activation child elements
        addClass: "fixfixed" // Pass class name
    });
}

Answer 2

Dans notre cas, cela se corrigerait dès que l'utilisateur ferait défiler. Voici donc le correctif que nous avons utilisé pour simuler un parchemin:

 $(document).on('blur', 'input, textarea', function () {
    setTimeout(function () {
        window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
    }, 0);
});
 

Answer 3

Voici une solution de hacky utilisant jQuery:

HTML:

 <label for="myField">My Field:</label> <input type="text" id="myField" />

<!-- ... other markup here .... -->

<div class="ad_wrapper">my fixed position container</div>
 

CSS:

 .ad_wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background-color: rgba(0,0,0,0.75);
    color: white;
    text-align: center;
}
.unfixed {
    position: relative;
    left: auto;
    bottom: auto;
}
 

JS:

 $(function () {
    adWrapper = $('.ad_wrapper');

    $(document).on('focusin', 'input, textarea', function() {
        adWrapper.addClass('unfixed');
    })
    .on('focusout', 'input, textarea', function () {
        adWrapper.removeClass('unfixed');
    });
});
 

Answer 4

Corrigé - Est-ce qu'un piratage a été effectué pour repousser l'en-tête à la position de correction relative une fois que la zone de texte de recherche a été entrée Il s'agit d'un bogue dans l'implémentation du clavier virtuel iOS car il casse les positions fixes dans les champs de texte SI la page peut défiler. Si le survol est masqué / la page ne peut pas défiler, elle ne cassera pas les positions fixes lors de l'exécution du clavier virtuel.

À votre santé.