Plantage de l'onglet sur appareil iOS lors d'un tri. about lairdubois HOT 17 OPEN

Salut,

Avec n'importe quel tri ou certains en particulier ?

from lairdubois.

Salut,

Merci pour ta réponse rapide.
Je n'ai pas testé tous les tris de toutes les sections, mais il semblerait que ce soient tous les tris qui ne fonctionnent pas.

De plus, j'ai aussi remarqué le bug suivant, qui doit probablement être lié :
Les filtres autres que les Tags ne fonctionne pas non plus pour les sections pour lesquelles le tri ne fonctionne pas.

J'ai l'impression que les filtres et tris qui fonctionnent sont ceux pour lesquels on peut aussi afficher la carte.

from lairdubois.

Arg, sur iOS 13.6, je ne vois pas ce problème.

Tu veux dire que c'est une sorte de "freeze" du JS. Ca n'est pas en attente d'une réponse du serveur ?

J'ai l'impression que les filtres et tris qui fonctionnent sont ceux pour lesquels on peut aussi afficher la carte.

Constat intéressant. Même si c'est plus l'inverse qui m'aurait donné des idées de pistes :)

from lairdubois.

Je n'ai pas l'impression qu'il attende une réponse du serveur, vu la différence de délai entre la version navigateur PC et tablette.
Je t'ai fait une capture vidéo pour te montrer le problème : https://imgur.com/a/TXYo8hr

from lairdubois.

Ok, merci pour la vidéo.
Y a pas moyen d'avoir une sorte de console de DEV depuis un Safari ou en branchant l'appareil à un ordi pour voir s'il n'affiche pas des erreurs ?

from lairdubois.

N'ayant pas de Mac sous la main, j'ai du demander à quelqu'un de tester pour moi, mais il n'est pas encore possible de simuler iOS 14 sur Safari.
De plus, dans les développer tools d'un navigateur sous Windows, en précisant un iPad ou un iPhone, je ne reproduis pas le problème. Mais je pense que c'est lié au fait que ce mode sur navigateur ne change que le user-agent et la taille, rien d'autre. Ce bug doit être lié au moteur Javascript en lui-même de l'iPhone/iPad.

from lairdubois.

Je confirme le bug sur Iphone 8 avec Safari pour iOS 14.2. Dès qu'on touche sur le bouton Filtre ou Tri ça "freeze" mais pas complètement. On peut continuer à scroller la page, mais impossible de refermer la popup du filtre ou du tri.

Je viens de faire le test avec les devtools ouverts, aucune erreur js ne s'affiche dans la console.

from lairdubois.

Pour les filtres, ce sont ceux qui ont l'attribut data-editable=true qui fonctionnent. Ce sont ceux qui ont besoin d'une saisie supplémentaire, tel qu'un outil, une essence de bois ou le nom d'un auteur qui fonctionnent. La requête part comme il faut et le contenu est bien filtré. Tous les filtres qui n'ont pas cet attribut plantent l'onglet, à tel point que ça fait bugguer le debugger de Safari...

from lairdubois.

Un autre problème (certainement lié) est que lorsque qu'on ouvre le dropdown des filtres, il est impossible de le refermer en cliquant sur le bouton Filtre. Il semblerait que ce soit un problème de focus.

Bien qu'il soit basé sur webkit, Safari a la paramètre CSS user-select:none par défaut.

En modifiant les propriétés CSS du button ça fonctionne:

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select:none

remplacé par :

-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;

Je suppose que ça fonctionne quand même sur les filtres qui ont l'attribut data-editable=true, qui change le focus vers l'input pour la saisie des informations complémentaires. Affaire à suivre ;)

from lairdubois.

Merci pour toutes ces précisions. Autant que je débrouille en HTML/CSS, autant là, c'est trop poussé pour moi 😅

Comment est-ce que tu as pu voir tout ça? Tu as une console JavaScript sur iOS? Ou bien tu utilises le débogguer safari en mode iOS?

from lairdubois.

Le problème semble bien venir de là.
Safari sur iOS change la propriété -webkit-user-select de la classe css .btn en mettant -webkit-user-select: none

En la remplaçant manuellement par -webkit-user-select: text tout fonctionne comme prévu. Tous les filtres fonctionnent parfaitement.

Comme je ne peux pas encore tester avec Symfony en mode dev, je n'arrive pas à traquer l'emplacement de la définition de la classe .btn pour y ajouter cette propriété, mais j'imagine que c'est dans les fichiers Bootstrap ?

J'ai vu par ailleurs, que cette propriété pouvait être définie deux fois dans la classe CSS pour que ça fonctionne dans tous les navigateurs avec un fallback pour Safari en mettant par exemple :

.btn {
  user-select: all;
  -webkit-user-select: text; /* Safari fallback only */
  -webkit-user-select: all; /* Chrome/Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
}

Voir notamment : https://stackoverflow.com/questions/34372056/how-to-make-user-select-work-for-safari-browser

Il est peut-être possible de fixer le problème différemment en faisant un e.preventDefault() sur l'action onmousedown ou peut-être ontouchstart du bouton.

from lairdubois.

Comment est-ce que tu as pu voir tout ça? Tu as une console JavaScript sur iOS? Ou bien tu utilises le débogguer safari en mode iOS?

Salut !

1. Je branche mon iPhone sur mon mac avec un câble.
2. J'ouvre Safari sur mon Mac, j'ouvre les préférences > Avancé > Afficher le mode développeur.
3. Ensuite j'ouvre l'onglet Développement sur le Safari de mon Mac. Il m'affiche alors l'iphone, et toutes les pages ouvertes sur le safari du téléphone.
4. En cliquant sur l'air du bois il ouvre la console du navigateur du téléphone...

Ensuite ça fonctionne comme une console classique. Et là j'ai un peu cherché et fait quelques tests ;)

from lairdubois.

Hmm, intéressant vos réponses !

.btn est en effet défini dans Bootstrap, mais on peut le surcharger.

PS : J'avais le PB sur Chrome pour iOS aussi...

from lairdubois.

J'aurais bien aimé pouvoir le tester, mais j'attends le Docker pour pouvoir m'y mettre ;D
Je suppose qu'il faudrait donc tester l'ajout de l'attribut webkit-user-select:text directement dans https://github.com/lairdubois/lairdubois/edit/master/src/Ladb/CoreBundle/Resources/assets/less/bootstrap/buttons.less et recompiler un css pour bootstrap.

Il faudra également vérifier que ça n'impacte pas les autres navigateurs négativement j'imagine ;)

Kenavo !

from lairdubois.

Salut à tous,

Je viens de mettre en place le workaround et ça semble fonctionné là où ça ne marchait plus. En espérant que ça n'a pas pété des truc ailleurs.

Merci pour vos investigations !!

from lairdubois.

Bon, en fait, ça merdouille un peu quand même. Maintenant quand on clique sur un bouton, ça y sélectionne le texte ....

from lairdubois.

En mettant all au lieu de text ? Dans mon souvenir ca sélectionne la parent du texte. Bon je ne suis pas sûr parceque je viens de voir que Safari iOS ne prend pas en charge all...

Je continue de chercher en parallèle ;)

from lairdubois.