API Visualviewport sous iOS 13

Bonjour,

J’ai remarqué que Discourse a réussi à calculer l’emplacement supérieur du clavier virtuel sur iOS. Cela est important si vous souhaitez positionner un élément juste au-dessus du clavier virtuel, comme ce champ de saisie dans lequel je tape actuellement.

Ce n’est pas un problème sur les appareils Android, car les éléments positionnés de manière fixe sont automatiquement repoussés vers le haut de l’écran visuel lorsque le clavier devient visible.

La solution de contournement pour iOS consiste à utiliser l’API visualViewport https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API. Le seul problème est qu’il n’y a pas de support pour les versions antérieures à iOS 13…

J’ai testé ce même champ de saisie sur un appareil sous iOS 12.1, et il semble que Discourse ait réussi à reproduire le comportement souhaité même sur les versions non prises en charge de Safari pour iOS.

Pourriez-vous m’indiquer la bonne direction pour obtenir le même résultat ? Je vous en serais très reconnaissant :smiley:

Cordialement,
Wouter Vermeersch

Je me souviens que @sam l’avait qualifié de « montagne de hacks », je ne suis pas sûr que tu veuilles vraiment t’y aventurer…

2 « J'aime »

Je peux imaginer que c’est une montagne de solutions de contournement. Je me casse la tête sur ce problème depuis plusieurs jours déjà, alors je suis prêt et ravi de gravir cette montagne avec plaisir :grinning: ..

J’ai déjà dû mettre en place une solution de contournement assez sale pour empêcher Safari mobile de faire remonter la barre fixe du haut lorsqu’on se concentre sur un champ de saisie. En fait, je pense que ce ne sera pas bien pire que ce que j’ai dû faire là-bas pour que cela fonctionne :stuck_out_tongue_closed_eyes:

2 « J'aime »

Le hack terrible consistait à retirer des éléments de leur position fixe lorsque le champ textarea recevait le focus, et à masquer tout le contenu de la page. Ensuite, on les réaffichait lorsque le champ textarea perdait le focus.

C’était très bizarre. Heureusement, @pmusaraj a présenté une implémentation beaucoup plus robuste.

5 « J'aime »

Le code pertinent pour les deux solutions se trouve ici : https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/lib/safari-hacks.js

Comme indiqué dans ce fichier, nous supprimerons bientôt les correctifs pour iOS 12. iOS 14 est sorti cette année, et seuls environ 5 % des appareils sont encore sous iOS 12.

4 « J'aime »

Merci de l’avoir partagé ! :smiley:

J’ai jeté un coup d’œil rapide à votre solution de contournement ; apparemment, vous avez opté pour le codage en dur des tailles de tous les différents claviers possibles ?

Cependant, lorsque la suggestion automatique est désactivée, la taille du clavier change. Comment gérez-vous cela ?

Je ne savais pas que la communauté utilisant iOS 12 était aussi réduite. Êtes-vous certain qu’il ne reste que 5 % d’utilisateurs sous iOS 12 et versions antérieures ? Dans ce cas, il pourrait être inutile de se concentrer sur ce problème particulier.

J’ai vérifié sur un iPhone 6 sous iOS 2.14

Le contournement fonctionne parfaitement lorsque la suggestion automatique est activée… lorsque la suggestion automatique est désactivée, il reste un espace… mais comme vous l’avez déjà indiqué, le nombre d’utilisateurs encore bloqués sur iOS 12 est très faible… Encore plus faible pour les utilisateurs bloqués sur iOS 12 avec la suggestion automatique désactivée.

Votre correctif est donc le meilleur que je puisse imaginer. Merci de le partager ! :wink:

Je ne sais pas s’il existe des chiffres officiels, mais ce graphique de Mixpanel indique qu’iOS 12 et versions antérieures représentent 7 %.

Je suis tout à fait d’accord pour dire qu’il ne vaut pas la peine de consacrer vos efforts à corriger ce problème sur iOS 12.

3 « J'aime »