Un bogue dans les entrées HTML dans iOS 11, récemment publié, crée des problèmes pour les sites Web dont les éléments d’entrée sont dans des conteneurs fixes. Voici exactement ce qui se passe et quelques solutions possibles.
Si vous avez un conteneur fixe et qu'il est suffisamment proche du bas de l'écran pour obliger le navigateur à faire défiler l'écran pour laisser de la place au clavier, le curseur est placé en dehors de la saisie de texte . nous, car l’une de nos fonctionnalités de base repose sur la saisie de l’utilisateur via un dialogue modal fixe.
Il s’agissait d’un problème critique dans la mesure où l’une de nos fonctionnalités essentielles repose sur la saisie de l’utilisateur via un dialogue modal fixe.
Pour l'instant, il n'y a que no solution parfaite. Deux options temporaires:
position: absolute
(Non recommandé)Détail de l'option 2: par exemple, vous pouvez définir votre div racine (ou tout ce qui comporte une barre de défilement) sur overflowY='hidden'
lorsque la boîte de dialogue s'ouvre et le redéfinir overflowY=''
lorsque la boîte de dialogue se ferme. (Inconvénient: le navigateur défilera en haut lorsque vous ouvrirez une boîte de dialogue/modale)
Remarque:
Cette solution m'a aidé à réparer n'importe quel modèle IOS.
La première chose que vous ciblez est IOS avec ce code.
//target ios
var isMobile = {
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
}
}
if(isMobile.iOS()) {
jQuery('body').addClass('Apple-ios');
}
puis mettez ce code dans votre css:
body.Apple-ios.modal-open {
position: fixed;
width:100%;
}
Si vous utilisez WordPress et le plug-in de cache, vous devez vider tout le cache.
J'espère que cela vous aidera.
Je ne suis pas sûr que ce soit exactement le même problème que vous, mais cette solution a fonctionné pour moi:
.modal-open {position: fixe;}
iOS 11 Safari bootstrap modal zone de texte en dehors du curseur
Ce bogue affecte également les entrées iframe, je pense donc que le correctif que j'ai trouvé aidera également les modaux.
Tout ce qui reste à faire est d’appliquer le css suivant à l’entrée dans l’iframe.
input:hover {
cursor: text
}
Voici un exemple: https://codepen.io/ryanoutloud/project/full/AEKGjj
Cette solution m'a aidé à résoudre le problème d'entrée IOS11: https://bitbucket.org/snippets/OlegChulakovStudio/RgBX8x
Il corrige également le défilement en arrière-plan ennuyeux, lorsque vous essayez de faire défiler l'intérieur de modal :)
Résumé: Vous ajoutez la position: fixée au corps, fenêtre cash.pageYOffset et défilez jusqu'à la position encaissée après la fermeture de la fenêtre pour empêcher tout déplacement en haut de la page.
J'ai eu le même problème, jetez un oeil à ma réponse, peut-être que cela vous aidera: https://stackoverflow.com/a/46954486/8775824
J'ai eu cette erreur iOS avec un formulaire de connexion à l'intérieur d'un élément fixed
en-tête/bannière. Il y a une button
dans l'en-tête pour ouvrir la fenêtre modale avec le formulaire de connexion . La fenêtre modale réelle est absolute
positionnée, mais l'élément en-tête/bannière est fixed
.
Je l'ai résolu assez facilement avec seulement quelques lignes de code. Donc, ce que je fais est que je change le conteneur fixed
en absolute
, mais seulement lorsque le formulaire de connexion est ouvert, il fait la magie avec le marqueur de saisie.
jQuery:
$('.ios #mob-login').on('click', function(){
$('body').toggleClass('login-open');
});
CSS:
.ios body.login-open #banner-wrapper {
position: absolute;
}
Alors maintenant, l'en-tête fixe devient absolu. S'il s'agit d'iOS et uniquement lorsque la boîte de connexion est ouverte.
Cela pourrait résoudre votre problème si vous rencontrez des problèmes similaires.
Ps. Vous avez besoin d'un script pour détecter et écrire le nom de la classe ios
/ios11
en <html>
ou similaire, mais je ne vais pas en parler dans cet article. Vous pouvez trouver de nombreuses solutions pour cela.
Essayez ceci il peut vous aider
//HTML
<head>
<style>
.ios-11-body-fixed {
position: fixed;
width: 100%;
}
</style>
</head>
//jQuery
$("#leadgen-modal").on('show.bs.modal', function () {
$('body').addClass('ios-11-body-fixed');
});
$('#leadgen-modal').on('hidden.bs.modal', function () {
$('body').removeClass('ios-11-body-fixed');
});