La barre de menus du safari IOS est en conflit avec les boutons situés dans la partie inférieure de 10% de l'écran.

11

Je construis un portail Web qui doit être fonctionnel et joli sur plusieurs plates-formes. Une des plateformes est IOS Safari, et c’est là que j’ai rencontré un problème. Dans mon code, j'aligne deux boutons flottants au bas d'une div avec une largeur et une hauteur de 100%. Tout cela fonctionne bien et mes boutons s'affichent exactement comme ils sont supposés l'être en bas de la page. Cependant, lorsque je clique sur les boutons, la vue compacte de Safari mobile passe en mode plein écran et mes boutons sont cachés derrière la barre de navigation inférieure!

Est-il normal que Safari Mobile affiche le menu développé lorsque l'utilisateur appuie sur les 10% inférieurs de l'écran? Comment puis-je éviter ça?

Dans ce gif, vous pouvez voir le problème sur le simulateur IOS: Exemple
Comme vous pouvez le constater, le problème ne se produit que lorsqu'un bouton se trouve dans les 10% inférieurs de la vue. Ceci est juste un bouton normal, Mon code a été vérifié trois fois par plusieurs développeurs et il ne contient aucune erreur.

ios safari development html dennismuijs
la source
Si vous répertoriez votre extrait de code,
signalez-
J'ai créé un bogue pour Safari, veuillez commenter ici: bugs.webkit.org/show_bug.cgi?id=194235
sheerun

Réponses:

6

Ce comportement est normal dans Mobile Safari. Si vous appuyez en bas, les différentes options du navigateur s'affichent et vous permettent de faire défiler la page Web en conséquence. La fonctionnalité de la page Web reste la même, de sorte que l'utilisateur peut toujours appuyer sur le bouton après l'avoir fait défiler pour accéder à la fonctionnalité dont il dispose.

nohillside
la source
3
Merci Patrix, je sais que c'est normal, mais existe-t-il un moyen de remplacer ce comportement par le biais de HTML, CSS ou JS? J'ai déjà posté cette question sur le débordement de pile, mais comme il s'agit de quelque chose lié à apple, peut-être demander-différent saura un chemin
dennismuijs
1
StackOverflow (ou même un site SE où les développeurs Web se fréquentent) convient mieux à ce genre de choses qu’AD (qui se concentre sur les problèmes des utilisateurs finaux). Comme l'accès aux contrôles du navigateur est en quelque sorte essentiel pour l'utilisateur, je doute qu'il existe un moyen d'éviter ce comportement.
nohillside
lien vers le débordement de pile q & a pour cela?
Ben Roberts
6

Je pense avoir trouvé une réponse. Définissez votre contenu pour avoir les styles suivants:

  • height: 100% (permet au contenu de remplir la fenêtre d'affichage et d'aller au-delà du bas)
  • overflow-y: scroll(vous permet de faire défiler sous la fenêtre d'affichage; la valeur par défaut est visible)
  • -webkit-overflow-scrolling: touch (pour lisser tout comportement de défilement)

semble forcer le menu iOS dans Safari à toujours apparaître. De cette façon, les clics sur les boutons fonctionneront plutôt que d'ouvrir le menu Safari. J'espère que cela t'aides!

jennz0r
la source
Bien sûr, cela fonctionne, mais tous les sites ne peuvent pas accepter de définir overflow-y: scrollleur zone de contenu principale. Ce hack a des effets secondaires qui affecteront tous ses éléments enfants. Pour le dire plus correctement, ces propriétés css affectent directement tous les éléments enfants et forcer l'affichage du menu safari est en réalité l'effet secondaire.
Zevdg