Safari dans ios8 est le défilement de l'écran lorsque les éléments fixes obtenir focus
Dans IOS8 Safari il y a un nouveau bug avec position fixe.
Si vous vous concentrez un textarea qui est dans un panneau fixe, safari rouleau-vous au bas de la page.
Ce fait toutes sortes de l'Isu est impossible de travailler avec, car vous n'avez aucun moyen de la saisie de texte dans ces zones de texte sans faire défiler votre page vers le bas et de perdre votre place.
Est-il un moyen de contourner ce bug proprement?
#a {
height: 10000px;
background: linear-gradient(red, blue);
}
#b {
position: fixed;
bottom: 20px;
left: 10%;
width: 100%;
height: 300px;
}
textarea {
width: 80%;
height: 300px;
}
<html>
<body>
<div id="a"></div>
<div id="b"><textarea></textarea></div>
</body>
</html>
- Serait de fixer un z-index sur #b de l'aide?
- z index n'est d'aucune aide, peut-être un peu de fantaisie aucun op css transformer le ferais bien avec pile de contextes, pas sûr.
- pour le contexte ici est la discussion sur le Discours: meta.discourse.org/t/dealing-with-ios-8-ipad-mobile-safari-bugs/...
- iOS safari est le nouvel IE
- Je vais avoir un problème similaire. Lors de la sélection d'ouvre et les besoins pour déplacer l'élément ayant le focus autour de sorte qu'il ira sur l'écran, le montant qu'il pousse le contenu semble y rester, événement après qu'il se ferme et repeint. Le contenu est à la bonne place, mais les points de contact sont dans le relevé de position. Toucher un champ de texte définit le focus à un champ de texte à un autre emplacement sur l'écran. L'inspecteur affiche les éléments dans le poussa du coude en position, au lieu d'où ils sont visuellement à l'écran. Je vais essayer de ce correctif et voir comment il va.
- d'accord. tout débile OS qui relie son navigateur par défaut de la version bas de l'OS va se heurter à des problèmes qui ont frappé c'est à dire pour les 7 dernières années.
- Zut, j'espérais que Apple aurait corrigé ce bug dans iOS9, mais j'ai juste mis à niveau et le bug est toujours là 🙁
- Oui, c'est terrible ...
- Toujours en panne dans iOS 10. Avez-vous déposé des bugs?
- de nombreuses fois, j'ai zéro confiance que cela ne sera jamais fixe, atteint sur twitter, tout essayé
- Double Possible de plusieurs questions. Voir gist.github.com/avesus/... pour plus de détails.
Vous devez vous connecter pour publier un commentaire.
Sur cette base bonne analyse de ce problème, j'ai utilisé ce dans
html
etbody
éléments en css:Je pense que c'est génial de travailler pour moi.
transform: translateZ(0);
à partir de stackoverflow.com/questions/7808110/...La meilleure solution que j'ai pu arriver, c'est de passer à l'utilisation
position: absolute;
sur l'objet et le calcul de la position où il était lorsqu'il a été à l'aide deposition: fixed;
. Le truc, c'est que lefocus
événement se déclenche trop tard, donctouchstart
doit être utilisé.La solution dans cette réponse, imite le comportement correct nous avons eu dans iOS 7 très près.
Exigences:
La
body
élément doit avoir un positionnement afin d'assurer un bon positionnement lors de l'élément interrupteurs de positionnement absolu.Le Code (Live Exemple):
Le code suivant est un exemple de base pour le test fourni des cas, et peuvent être adaptés à votre cas d'utilisation.
Voici le même code sans le hack pour la comparaison.
Mise en garde:
Si le
position: fixed;
élément a d'autres éléments de parent avec le positionnement d'ailleursbody
, commutation deposition: absolute;
peut avoir un comportement inattendu. En raison de la nature deposition: fixed;
ce n'est probablement pas un problème majeur, étant donné l'imbrication de ces éléments n'est pas commun.Recommandations:
Tandis que l'utilisation de la
touchstart
événement permettra de filtrer la plupart des environnements de bureau, vous aurez probablement besoin d'utiliser le user-agent sniffing de sorte que ce code ne fonctionnera que pour le cassé iOS 8, et pas d'autres appareils tels que Android et plus les versions d'iOS. Malheureusement, nous ne savons pas encore quand Apple va corriger ce problème dans iOS, mais je serais surpris s'il n'est pas corrigé dans la prochaine version majeure.J'ai trouvé une méthode qui fonctionne sans la nécessité de changer de position absolue!
Plein décommenté code
Décomposant
Vous devez d'abord avoir le fixe champ de saisie vers le haut de la page dans le code HTML (c'est un élément fixe de sorte qu'il devrait sémantiquement sens de l'avoir près du haut de toute façon):
Alors vous avez besoin pour enregistrer la position de défilement dans les variables globales:
Alors vous avez besoin d'un moyen de détecter les appareils iOS, de sorte qu'il n'affecte pas les choses qui n'ont pas besoin de la fixer (la fonction de prise de https://stackoverflow.com/a/9039885/1611058)
Maintenant que nous avons tout ce dont nous avons besoin, voici la correction 🙂
J'ai été en mesure de résoudre ce problème pour sélectionner les entrées par l'ajout d'un écouteur d'événement à la nécessité de sélectionner des éléments, puis le défilement par un décalage d'un pixel lorsque le sélectionner en question obtient le focus.
Ce n'est pas forcément une bonne solution, mais il est beaucoup plus simple et plus fiable que les autres réponses que j'ai vu ici. Le navigateur semble à nouveau le rendu/re-calcul de la position: fixed; attribut basé sur le décalage fourni dans la fenêtre.scrollBy() fonction.
Un peu comme Mark Ryan Sallee suggéré, j'ai trouvé que l'évolution dynamique de la hauteur et de dépassement de mon élément d'arrière-plan est la clé de cette donne Safari rien à faire défiler jusqu'à.
Ainsi, après la modale de l'animation d'ouverture de finitions, changer l'arrière-plan du style:
Lorsque vous fermez le changement modal de retour:
Tandis que d'autres réponses sont utiles dans le plus simple des contextes, mon DOM était trop compliqué (merci SharePoint) pour utiliser l'absolu et fixe swap.
C'est maintenant corrigé dans iOS 10.3!
Hacks ne devrait plus être nécessaire.
Proprement? no.
J'ai récemment eu ce problème moi-même avec un champ de recherche dans un collant en-tête, le meilleur que vous pouvez faire pour le moment est de garder la position de défilement dans une variable à tout moment et lors de la sélection de l'élément fixe de la position absolue au lieu de fixe avec un haut poste basé sur le document de position de défilement.
C'est cependant très laid et encore des résultats dans certaines étrange et-vient de défilement avant d'atterrir sur le bon endroit, mais il est le plus proche que je pouvais obtenir.
Toute autre solution consisterait primordial, le défilement par défaut mécanique du navigateur.
N'ont pas traité avec ce bug, mais peut-être mettre un overflow: hidden; sur le corps lorsque la zone de texte est visible (ou juste à l'actif, en fonction de votre conception). Cela peut avoir pour effet de ne pas donner le navigateur de n'importe où "vers le bas" pour faire défiler jusqu'à.
Une solution possible serait de remplacer le champ de saisie.
JS:
CSS:
HTML:
codepen
Aucune de ces solutions n'a fonctionné pour moi parce que mon DOM est compliqué et j'ai dynamiques infini défilement des pages, donc j'ai dû créer mon propre.
De fond: je suis en utilisant un en-tête fixe et un élément plus bas qui colle ci-dessous une fois l'utilisateur fait défiler que de loin en bas. Cet élément a un champ de saisie de recherche. En outre, j'ai des pages dynamiques ajouté lors de l'avant et vers l'arrière de défilement.
Problème: Dans iOS, chaque fois que l'utilisateur a cliqué sur l'entrée dans l'élément fixe, le navigateur de faire défiler tout le chemin vers le haut de la page. Ce n'est pas seulement causé un comportement indésirable, il a également déclenché ma page dynamique ajouter en haut de la page.
Solution attendue: Pas de scroll dans iOS (aucun) lorsque l'utilisateur clique sur l'entrée dans le collant élément.
Solution:
Exigences: JQuery mobile est nécessaire pour la startsroll et stopscroll fonctions de travail.
Anti-rebond est inclus pour lisser toute décalage créé par le collant élément.
Testé dans iOS10.
J'ai juste sauté par-dessus quelque chose comme ça, hier, par le réglage de la hauteur de #un max visible de la hauteur (la hauteur de la carrosserie a été dans mon cas) lors de la #b est visible
ex:
ps: désolé pour la fin de l'exemple, juste remarqué qu'il était nécessaire.
J'ai eu le problème, au-dessous des lignes de code résolu pour moi -