Comment réparer l'élément d'entrée iOS 11 dans les modaux corrigés bug

Un bogue dans les entrées HTML dans le nouvel iOS 11 crée des problèmes pour les sites Web qui ont des éléments d'entrée dans des conteneurs fixes. Voici exactement ce qui se passe et quelques solutions de contournement possibles.Comment réparer l'élément d'entrée iOS 11 dans les modaux corrigés bug

Si vous avez un dans un conteneur fixe et qu'il est suffisamment proche du bas de l'écran pour forcer le navigateur à faire défiler la place pour le clavier, le curseur est placé en dehors de l'entrée de texte. Cela a été un problème critique pour nous car l'une de nos principales fonctionnalités repose sur l'entrée de l'utilisateur via un dialogue modal fixe.

Cela a été un problème critique pour nous car l'une de nos principales fonctionnalités repose sur l'entrée de l'utilisateur via un dialogue modal fixe.

Source

2017-10-04 Amjad Jafar

Je ne suis pas sûr que ce soit exactement le même problème que vous rencontrez, mais cette solution a fonctionné pour moi:

.modal ouvert {position: fixed;}

iOS 11 Safari bootstrap modal text area outside of cursor

Source

2017-10-09 20:33:09

J'ai eu le même problème, jetez un oeil à ma réponse, peut-être vous aider: https://stackoverflow.com/a/46954486/8775824

Source

2017-10-26 12:42:26 Dan

Cette solution m'a aidé à résoudre problème d'entrée IOS11: https://bitbucket.org/snippets/OlegChulakovStudio/RgBX8x

Il fixe également défilement ennuyeux de fond, lorsque vous essayez de faire défiler l'intérieur modal :)

Résumé: Vous ajoutez position: fixed au corps, fenêtre de trésorerie .pageYOffset et faites défiler jusqu'à la position encaissée après la fermeture de la fenêtre pour empêcher le déplacement vers le haut de la page.

Source

2017-11-03 10:10:51

J'avais cette bogue iOS avec un formulaire de connexion dans un élément d'en-tête/bannière fixed. Il y a un button dans l'en-tête pour ouvrir la fenêtre modale avec le formulaire de connexion. La fenêtre modale actuelle est absolute positionnée, mais l'élément d'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 c'est que je change le conteneur fixed en absolute, mais seulement quand le formulaire de connexion est ouvert, il fait la magie avec le marqueur d'entrée.

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 absolue. Si c'est iOS et seulement quand la boîte de connexion est ouverte.

Cela pourrait résoudre votre problème si vous avez des problèmes similaires.

Ps. Vous avez besoin d'un script pour détecter et écrire le nom de la classe ios/ios11 à <html> ou similaire, mais je ne vais pas dans ce point dans ce post. Vous pouvez trouver de nombreuses solutions pour cela.

Source

2017-11-17 12:00:32 JoakimB

Pour l'instant il y a pas de parfait pour cela.Deux options temporaires:

boîte de dialogue Modifier/modal position: absolute (non recommandé)
Essayez de supprimer le défilement arrière-plan lorsque modal/boîte de dialogue ouvre et restaurer lors de dialogue à proximité.

Détail pour l'option 2: Par exemple, vous pouvez configurer votre div racine (ou ce qui a une barre de défilement) comme overflowY='hidden' Lorsque le dialogue ouvre, et le changer en arrière quand overflowY='' dialogue se ferme. (Inconvénient: navigateur défilera vers le haut lorsque vous ouvrez dialogue/modal)

Note:

rappelez-vous de détecter OS/navigateur lorsque des correctifs de déclenchement, sinon vous rencontrerez probablement le problème dans IE.
Suivez les étapes this thread pour obtenir la mise à jour la plus récente à propos de ce problème.

Source

2017-11-18 09:32:40 Ming

Merci d'avoir montré de l'intérêt, mais 'débordement' ne fonctionne pas sur le navigateur ipad safari et je travaille sur des pages dynamiques afin qu'il n'y ait pas de limite de longueur et que 'position: absolute' ne fonctionne jamais. –

Même problème auparavant. Aussi fixé en définissant 'position: absolute' – iplus26

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

Source

2017-12-19 09:41:11

Merci pour votre aide! mais dans mon scénario cela ne fonctionne pas à 100% car j'ai des pages dynamiques très longues et quand vous ajoutez 'position: fixed' au corps il défile vers le haut à chaque fois, comment je gérais avec une hauteur dynamique fonction jquery, mais il a également échoué dans certains scénarios. –

Cette solution m'a aidé à fixer dans un modèle IOS.

Première chose cible uniquement les périphériques 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 mettre ce code dans votre code CSS:

body.apple-ios.modal-open { 
    position: fixed; 
    width:100%; 
}

Si vous utilisez WordPress et plug-in de cache, vous devez vider le cache tout.

J'espère que cela vous aidera.

Source

2018-03-07 07:21:27

Comment réparer l'élément d'entrée iOS 11 dans les modaux corrigés bug

Répondre

Questions connexes