Testé dans Safari et Chrome - le même résultat, alors je pense que c'est une question iOS.
Cela ne se produit que s'il y a une entrée à l'intérieur du modal et que je tapoque cette entrée. Dans le même moment, cette entrée reçoit la mise au point et le clavier IOS natif devient visible.
La page ci-dessous modal au même moment est automatiquement défilée à 50% de sa hauteur. Ce comportement est totalement indésirable et je n'ai aucune idée de l'empêchement de cette "fonctionnalité" par défaut.
Démo:
update : le commit de la réparation: limonte / sweettalt2 / commit / 4A2D36B
4 Réponses :
sur iOS, j'ai eu des problèmes avec des événements de défilement causés par Settimeout et Seinterval (position des causes modales?). J'ai trouvé une solution quelque part avec le code suivant.
Function.prototype.bind = function(parent) {
var f = this;
var args = [];
for (var a = 1; a < arguments.length; a++) {
args[args.length] = arguments[a];
}
var temp = function() {
return f.apply(parent, args);
}
return(temp);
}
setTimeout(function() {
// your animation stuff here
}.bind(this), 100);
Cela me ressemble à un hack très sale. Même si cela fonctionne, je ne l'utiliserais pas, L'extension d'objets natifs est une mauvaise pratique .
@LIMONTE Tu as raison, mais la cette fonction n'est-elle que "copier" elle-même?
Une chose que je peux penser ici est de ajouter probablement le Fast click bibliothèque à votre code. Certains problèmes d'initialisation iOS et Android, tels que le délai 300ms sont traités par un clic rapide. Ça vaut la peine d'être coupé
Nous sommes confrontés à un problème similaire au travail et je suis tombé sur cette question avec votre page de démonstration (excellente) de la page de démonstration.
Comme vous l'avez mentionné, le décalage est toujours à environ 50% de la hauteur de la page, qui se produit peu importe de l'endroit où votre décalage initial est.
Dans le passé, lorsque j'ai observé un "saut" similaire avec des versions antérieures iOS (bien que, beaucoup moins dramatique de saut), j'ai généralement travaillé autour de cela en appliquant Cependant, cela a la conséquence sans surveillance de sauter de l'utilisateur en haut de la page, s'ils ont défilé. Donc, si vous êtes ouvert à ce problème avec quelques et ce que la CSS ressemble à: Voici une fourchette de Votre page de démonstration, pour illustrer: https://jpatttihall.github.io/sweetalert2/ios -bug.html et pour ceux qui recherchent une solution plus générale, vous pouvez faire quelque chose comme ce qui suit lors de l'ouverture / la fermeture d'un modal: Edit: Une chose à noter est que nous n'avons pas appliqué la solution à tous les appareils / plates-formes aveuglément, juste iOS Safari. J'ai remarqué dans votre autre question que vous n'étiez pas un fan de débordement: caché en raison du déplacement de la page lorsque la barre de défilement apparaît / disparaît (que je suis totalement d'accord avec). Je suggérerais d'appliquer uniquement les fichiers JS à iOS uniquement. Position: fixe (ou relative ) au corps ( Cela permet à débordement: caché fonctionner correctement ). JavaScript , voici un Correction / hack que j'ai jeté ensemble:
Wow! Votre démo fonctionne! Enfin de la solution de travail! Tu es le héros de ma journée :) laissez-moi essayer de mettre en œuvre cette solution à Sweetalert2 de manière agréable. Pour le moment, je vais accepter votre réponse après le test. Merci!
Quel bug terrible! Et c'est une solution géniale. J'ai essayé d'ajouter du corps fixe mais comme vous l'avez dit, il fait défiler la page en haut. On dirait vraiment étrange avec un fond modal transparent. Mais le top négatif fonctionne! Est-ce que quelqu'un sait si ce bogue apparaît également sur les périphériques Android?
Quelque chose d'autre à vérifier est que la taille de la police du champ d'entrée est supérieure au minimum qui déclenchera un zoom sur l'entrée. Je travaille de la mémoire ici, mais j'ai eu un problème similaire. Réglage de la taille de la police d'entrée sur 16px (à nouveau de la mémoire) ou plus évitée Safari IOS d'essayer de zoomer le champ d'entrée et de jouer ainsi avec la page Scroll.
Avez-vous des fonctions de sécurité ou seinterval dans votre JavaScript?
Oui, la fonctionnalité mise au point automatique entrée fonctionne avec
setTimeout ( )à cause des animationsCela ne s'est produit qu'une seule fois dans IOS Safari et ce n'est jamais arrivé après cela. Mais en chrome, cela se produit à chaque fois.
Qu'est-ce qui se passe sur ce gif?
@Biandleishman Ce n'est plus hébergé, d'où le 404. Un gif est toujours disponible ici: Github.com/ Sweetalert2 / Sweetalert2 / Problèmes / 136
Merci @yvan, j'ai mis à jour la question.