Wp-rocket: Delay JS - Les liens doivent être cliqués deux fois sur iOS / Safari

Un client a également signalé cela avec le plugin Flying Scripts.

Après avoir recherché, j'ai compris qu'il y avait un problème sur IOS avec Safari lié à l'utilisation de touchstart ou touchmove sans utiliser touchend ce qui rend les liens double-cliquez sur n'importe quel point de l'écran en tant que premier clic, puis vous pouvez cliquer sur n'importe quel lien)

le lien suivant tente de mettre en évidence le problème:
https://stackoverflow.com/a/10340968

Sur le site client, j'ai effectué le changement suivant et résolu le problème:
https://github.com/wp-media/wp-rocket/blob/7ec9d996f004707a57c4c8476090d5bd943051f0/assets/js/lazyload-scripts.js#L91 -L99
remplacez touchmove par touchmove touchend
remplacez touchstart par touchstart touchend

Après avoir vérifié avec @hellofromtonya , elle a dit: -

Ce problème particulier nécessitera une enquête plus approfondie pour savoir pourquoi. Plutôt que d'ajouter un correctif au code pour ce cas particulier, pourquoi ont-ils le problème et pourquoi cette combinaison spécifique le résout-il?
Je pense que le «pourquoi» ici sera très précieux pour nous assurer que nous n'injectons pas un autre problème pour les autres clients.

j'ajouterai donc les besoins: label de recherche et développement à étudier.

Un autre cas: https://secure.helpscout.net/conversation/1296370691/198532?folderId=377611
Le client rapporte que cela se passe sur Chome et Safari sur mobile

Billet associé: https://secure.helpscout.net/conversation/1296809928/198688/

Ticket associé: https://secure.helpscout.net/conversation/1322836283/206594?folderId=2135277

Billet associé: https://secure.helpscout.net/conversation/1334490646/210819/

Billet associé: https://secure.helpscout.net/conversation/1336672544/211528/
Notes et enregistrement d'écran dans les notes. Le problème se produit dans les navigateurs Safari et Chrome.

Après avoir recherché, j'ai compris qu'il y avait un problème sur IOS avec Safari lié à l'utilisation de touchstart ou touchmove sans utiliser touchend ce qui rend les liens double-cliquez sur n'importe quel point de l'écran en tant que premier clic, puis vous pouvez cliquer sur n'importe quel lien)

le lien suivant tente de mettre en évidence le problème:
https://stackoverflow.com/a/10340968

Sur le site client, j'ai effectué le changement suivant et résolu le problème:
https://github.com/wp-media/wp-rocket/blob/7ec9d996f004707a57c4c8476090d5bd943051f0/assets/js/lazyload-scripts.js#L91 -L99

remplacez touchmove par touchmove touchend
remplacez touchstart par touchstart touchend
Après avoir vérifié avec @hellofromtonya , elle a dit: -

Ce problème particulier nécessitera une enquête plus approfondie pour savoir pourquoi. Plutôt que d'ajouter un correctif au code pour ce cas particulier, pourquoi ont-ils le problème et pourquoi cette combinaison spécifique le résout-il?
Je pense que le «pourquoi» ici sera très précieux pour nous assurer que nous n'injectons pas un autre problème pour les autres clients.

j'ajouterai donc les besoins: label de recherche et développement à étudier.

J'ai essayé cette suggestion mais cela n'a malheureusement pas résolu le problème sur iOS (du moins pour moi).

Même problème. J'ai essayé cette fonctionnalité pour la première fois il y a quelques jours et j'ai obtenu des rapports immédiats indiquant que les liens sur iOS ne fonctionnaient pas et qu'ils avaient besoin d'un double appui pour fonctionner. Essayé sur 2 appareils iOS 14 et confirmé ce problème donc désactivé pour le moment.

Des mises à jour à ce sujet?

En relation: https://secure.helpscout.net/conversation/1367506767/223234

Même problème. Les mises à jour?

Vous rencontrez le même bug avec les scripts WP-Rocket et Flying. Remplacer touchstart et touchmove n'a pas aidé.

En relation: https://secure.helpscout.net/conversation/1376564315/226026/

Cela se produit sur le navigateur Chrome iOS plutôt que sur Safari. Quelqu'un d'autre peut confirmer?

Nous avons abandonné le plugin WP Rocket pour le moment, ce problème est déjà ouvert depuis 3 mois et je n'ai pas l'impression qu'il va être corrigé de si tôt avec le nombre actuel de problèmes ouverts (+400).

En relation: https://secure.helpscout.net/conversation/1379195337/226677

J'espère que WP-rocket ajoutera bientôt le "correctif" :)

Une mise à jour des développeurs? Travaillez-vous dessus?

@ wp-media / dev Puisque nous en voyons de plus en plus et que le bogue rend la fonctionnalité assez inutilisable, je pense que nous devons lui donner la priorité. Je l'ai ajouté au prochain sprint pour voir si nous pouvons trouver une solution. 🙏

@ wp-media / dev Puisque nous en voyons de plus en plus et que le bogue rend la fonctionnalité assez inutilisable, je pense que nous devons lui donner la priorité. Je l'ai ajouté au prochain sprint pour voir si nous pouvons trouver une solution. 🙏

Ça a l'air bien. Cette fonctionnalité fait une grande différence pour mon site Web en termes de vitesse, j'aimerais bien la réactiver =)

@arunbasillal non, le problème est marqué comme nécessitant de la R&D, il ne peut pas faire partie d'un sprint. Pour qu'un problème fasse partie d'un sprint, il doit d'abord être entièrement préparé.

@ wp-media / dev Puisque nous en voyons de plus en plus et que le bogue rend la fonctionnalité assez inutilisable, je pense que nous devons lui donner la priorité. Je l'ai ajouté au prochain sprint pour voir si nous pouvons trouver une solution. 🙏

Merci! J'adore vraiment cette fonctionnalité - ce serait génial si elle peut être utilisée sur tous mes sites Web!

@ wp-media / productrocket Quelques retours de l'équipe à ce sujet:

• C'est délicat à cause du fonctionnement d'iOS.
• Le fait est que les écrans tactiles n'ont pas vraiment une bonne alternative au survol, autre que peut-être le toucher et maintenir - mais au moins sur les appareils iOS, cela a sa propre signification (il charge un cadre d'aperçu de la destination du lien).
• Ahmed a plongé profondément dans cela aussi avant, la seule solution est d'utiliser le timeout comme des scripts volants

Comme il n'y a pas de solution à cela sans des changements significatifs dans le fonctionnement actuel de cette fonctionnalité, il faut réfléchir davantage avant d'aller plus loin.

Need et mouseWheel et setTimeOut. Sur les scripts mouseweel comme Infinite Scroll et autres scripts, ne fonctionne pas correctement, ne charge pas la page suivante si ce n'est que mousewhell. En général, cela s'applique à tous les scripts, et c'est essentiel.
Delay JS sans setTimeOut pose également des problèmes, en plus des liens doivent être cliqués deux fois. Exemple: Dans le segment russe, moteur de recherche Yandex. Le compteur peut utiliser un visualiseur Web, il s'agit d'un enregistrement des actions de l'utilisateur. En conséquence, le script ne doit pas être retardé: car lors de la visualisation des actions de l'utilisateur, le script de compteur sur le site doit être chargé. Et naturellement, il ne se charge pas car aucune action, aucune action, aucun "keydown", "mouseover", "touchmove", "touchstart" ne se produisent dans le visualiseur.

J'aimerais vraiment savoir comment l'équipe WP Rocket envisage cela, mais au moins l'option de chargement automatique des scripts après x secondes est indispensable jusqu'à ce que iOS corrige le problème.

@ wp-media / productrocket Quelques retours de l'équipe à ce sujet:

• C'est délicat à cause du fonctionnement d'iOS.
• Le fait est que les écrans tactiles n'ont pas vraiment une bonne alternative au survol, autre que peut-être le toucher et maintenir - mais au moins sur les appareils iOS, cela a sa propre signification (il charge un cadre d'aperçu de la destination du lien).
• Ahmed a plongé profondément dans cela aussi avant, la seule solution est d'utiliser le timeout comme des scripts volants

Comme il n'y a pas de solution à cela sans des changements significatifs dans le fonctionnement actuel de cette fonctionnalité, il faut réfléchir davantage avant d'aller plus loin.

Un calendrier pour la mise en œuvre de la solution de délai d'expiration?

Le chargement de scripts après X secondes n'est pas la solution. Faire cela est juste à l'opposé de l'intérêt de cette fonctionnalité. Si nous pouvons trouver une solution sans faire cela, nous essaierons de continuer dans cette voie.

@arunbasillal @ engahmeds3ed Pourriez-vous refaire quelques tests?

Je demande car nous avons également eu le même problème avec notre site Web. Mais depuis la semaine dernière, nous n'avons plus le problème. Est-ce la coïncidence de la sortie de notre nouveau site Web ou d'une mise à jour iOS?

Un calendrier pour la mise en œuvre de la solution de délai d'expiration?

Nous ne pouvons pas fournir d'ETA.

@GeekPress Lorsque je consulte votre site avec Chrome à l'aide de la taille de la fenêtre mobile fournie par l'outil de développement (y a-t-il un nom officiel pour cette fonctionnalité? Peut-être un aperçu mobile?), Le défilement à deux doigts ne déclenche jamais des scripts retardés, y compris des analyses. Et pour les problèmes de double-clic sur ce fil, quelle page et quel lien avez-vous testé? La première page?

@GeekPress Lorsque je consulte votre site avec Chrome à l'aide de la taille de la fenêtre mobile fournie par l'outil de développement (y a-t-il un nom officiel pour cette fonctionnalité? Peut-être un aperçu mobile?), Le défilement à deux doigts ne déclenche jamais des scripts retardés, y compris des analyses. Et pour les problèmes de double-clic sur ce fil, quelle page et quel lien avez-vous testé? La première page?

Je ne pense pas que les tests avec l'aperçu mobile dans l'outil de développement Chrome donnent le même résultat que les tests sur un appareil iOS en raison de la différence entre les gestes tactiles.

@Roboonl Vous avez raison, ils devraient être différents. Et je ne le fais pas. Je me demande simplement si c'est OK pour WP Rocket que les scripts ne soient jamais chargés sous certaines conditions.

Le setTimeOut est nécessaire, ou plutôt nécessaire.

en relation: https://secure.helpscout.net/conversation/1406743456/234374/

Cas connexe: https://secure.helpscout.net/conversation/1405169718/233859/

Navigateur: Safari et Chrome
Appareil: iPhone 11 Pro

L'ajout d'un déclencheur de délai d'expiration résoudrait également https://github.com/wp-media/wp-rocket/issues/3420

L'ajout d'un déclencheur de délai d'expiration résoudrait également le # 3420

@piotrbak Je ne suis pas sûr que # 3420 soit lié à ce problème. Correction du # 3454 Dois-je penser Fix # 3420

@GeekPress D'après ce que j'ai compris, les utilisateurs faisaient défiler la page Web et le Delay JS n'était pas déclenché. Le script Google Analytics n'a pas été chargé à ce moment-là.

Il semble que vous avez raison sur https://github.com/wp-media/wp-rocket/issues/3454, il est également lié aux mobiles. Probablement l'un de ces problèmes résoudrait le https://github.com/wp-media/wp-rocket/issues/3420
Merci

Toute mise à jour?

@arunbasillal Vous ne pouvez pas ajouter une option dans WP-rocket pour que cela exclue sur certaines pages à la place en attendant?
Comme Flying Scripts, ils ont même la possibilité d'exclure le Delay JS pour certaines pages avec des mots-clés.

un autre cas:
https://secure.helpscout.net/conversation/1417928403/237257?folderId=2683093

Je ne pense pas que les tests avec l'aperçu mobile dans l'outil de développement Chrome donnent le même résultat que les tests sur un appareil iOS en raison de la différence entre les gestes tactiles.

@Roboonl Il a été testé sur un vrai appareil mobile. Veuillez essayer notre site Web sur mobile, vous n'avez pas besoin de cliquer deux fois.

@roberthedlund J'aurais dû manquer quelque chose, je ne trouve aucun moyen avec Flying Script d'avoir des mots-clés basés sur des pages.

Je ne pense pas que les tests avec l'aperçu mobile dans l'outil de développement Chrome donnent le même résultat que les tests sur un appareil iOS en raison de la différence entre les gestes tactiles.

@Roboonl Il a été testé sur un vrai appareil mobile. Veuillez essayer notre site Web sur mobile, vous n'avez pas besoin de cliquer deux fois.

@roberthedlund J'aurais dû manquer quelque chose, je ne trouve aucun moyen avec Flying Script d'avoir des mots-clés basés sur des pages.

https://ibb.co/qYVyhh6

@roberthedlund Eh bien, vous pouvez déjà le faire avec WP Rocket aussi. Il vous suffit d'aller sur votre écran d'édition de page, d'ouvrir la métabox «WP Rocket Options», et de désactiver l'option Delay JS Execution.

@roberthedlund Eh bien, vous pouvez déjà le faire avec WP Rocket aussi. Il vous suffit d'aller sur votre écran d'édition de page, d'ouvrir la métabox «WP Rocket Options», et de désactiver l'option Delay JS Execution.

Ouais mais pas idéal pour le faire manuellement sur plus de 100 pages par exemple.

Toute mise à jour?

Ce problème est toujours disponible avec la version 3.8.6 avec Chrome sur Android. J'ai juste essayé Fying Scripts, puis ce bug de double clic ne s'est pas produit. Pour iOS, même avec Flying Scripts, les spectateurs doivent double-cliquer.

Toute mise à jour? Je trouve étrange que vous n'ayez toujours pas informé les utilisateurs de WP-rocket du problème. Est-il difficile de saisir un avertissement avant que les gens n'activent la fonction Delay JS? J'ai vu tant d'utilisateurs dans divers forums qui ne savent pas encore qu'ils souffrent du problème avant que je les ai contactés à ce sujet. C'est un gros problème et je pense que vous devriez le mettre en garde.

@socialpreneur Pour iOS, essayez-vous sur un vrai mobile, et non avec une simulation?

Pourquoi je pose la question?

Je réessaye moi-même sur mon iPhone 8 personnel et je n'ai pas à cliquer deux fois sur tous les sites Web que j'ai essayés et qui avaient Delay JS, y compris notre propre site Web.

@GeekPress Sur un vrai mobile, y compris moi et le téléphone de mon client, j'ai donc dû désactiver complètement Delay JS. Les scripts volants ne fonctionnaient pas non plus, donc je suppose que c'est une limitation iOS pour le moment.

Ajouté: Il semble qu'un script externe ou interne soit à l'origine de ce problème. Tous les sites qui utilisent Delay JS de WP Rocket ou Flying Scripts ne présentent pas ce symptôme de double-clic. Jusqu'à présent, deux sites qui n'ont pas ce problème n'utilisent pas adsense. Je pense que nous devrons rassembler plus de cas pour déterminer quelle est la cause.

@GeekPress

@socialpreneur Pour iOS, essayez-vous sur un vrai mobile, et non avec une simulation?

Pourquoi je pose la question?

Je réessaye moi-même sur mon iPhone 8 personnel et je n'ai pas à cliquer deux fois sur tous les sites Web que j'ai essayés et qui avaient Delay JS, y compris notre propre site Web.

J'avais essayé sur de nombreux sites Web utilisant Delay JS et essayé sur de vrais téléphones. iPhone 8, iPhone SE, iPhone 11 et tous avaient ce problème. Parfois, cela fonctionne au premier "clic", puis les autres cessent totalement de fonctionner. Le problème est donc réel.

@socialpreneur Avez-vous essayé notre site Web (https://wp-rocket.me)? Comme je l'ai dit, je ne suis pas en mesure de reproduire le problème après avoir essayé sur quelques sites Web.

Puis-je connaître la version iOS que vous utilisez?

@GeekPress Tout ce que vous voyez n'est pas la vérité. Si au moins un utilisateur de WP Rocket rencontre le problème, nous devons tout faire pour résoudre le problème. Mon iOS est 14.4 et je vais demander à mon client sa version iOS. Comme je l'ai dit, puisque cela se produit sur tous les plugins Delay JS (WP Rocket, Flying Scripts, Perfmatters) sur certains sites avec certains scripts, ce n'est pas seulement votre cause.

C'est peut-être un navigateur, mais quand je vois ce problème de double-clic, ce n'est pas seulement iOS, mais je l'ai sur mon Android et son Chrome donc ce n'est clairement pas seulement le problème iOS ni Safari. J'espère juste que nous pourrons trouver un petit hack ou des functions.php supplémentaires pour contourner ce problème sur certains sites.

Je vous ferai savoir si je trouve quelque chose.

Ajouté 1: OK, voici le troisième site qui rencontre le problème. Peut-être que je peux affiner certains scripts courants.

Ajouté 2: Jusqu'à présent, le simple fait d'activer Delay JS ne déclenchera pas ce problème.

Mais lorsque je configure certains scripts, un double-clic / tap commence à se produire.

Ajouté 3: Très bien, voici ce que j'ai trouvé. Lorsque j'ajoute une "table des matières", un double clic se déclenche. Ce n'est peut-être pas la même chose pour tous les autres utilisateurs qui signalent cela, mais jusqu'à présent, c'est l'un des mots-clés. Table of Contents Plus est le nom du plugin.

Ajouté 4: Voici de bonnes nouvelles. Un autre site ayant le même problème utilise également TOC Plus. @GeekPress , veuillez le tester avec ce plugin activé. Et dites à tout votre personnel de support de confirmer si les utilisateurs ayant le même problème utilisent également ce plugin sur leurs sites. AU PLUS VITE.

Ajouté 5: J'ai réussi à résoudre ce problème pour l'un des sites en ne retardant pas le script TOC Plus. Mais la même solution n'a pas fonctionné pour un autre site, il semble donc que d'autres scripts ne soient pas compatibles avec les délais.

Ajouté 6: J'ai le sentiment que la version jquery peut prendre une partie de ce problème. Un site de travail utilise la dernière version et l'autre qui ne fonctionne pas utilise l'ancienne version (/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp). Débogage plus loin ...

@GeekPress Mis à part TOC Plus, j'ai également trouvé que adsense est la cause du double clic / tap. J'ai testé avec quelques sites, et tous les sites avec des thèmes / plugins différents ont la même chose. Cela se produit avec tous les mots clés AdSense ci-dessous.

• googlesyndication
• adsbygoogle
• adsbygoogle.js

Reproduire

1. Créez un site de test avec adsense n'importe où, au-dessus du pli ou non.
2. Actualisez la page, appuyez sur le logo / texte de l'en-tête ou sur l'icône du menu mobile. À ce stade, adsense est chargé, mais il n'ouvrira pas le menu d'un seul clic.

Solution

Je ne suis pas sûr car cela semble comment le script adsense est conçu. Les travaux de contournement considérables sont:

1. Chargez AdSense toujours après 1 seconde. donc la plupart des utilisateurs ne seront pas confrontés à ce problème.
2. Précharger adsense lors du survol de la souris (je ne sais pas si cela fonctionnerait sur un mobile tap)
3. Dites aux utilisateurs de ne pas monétiser avec adsense, afin que les sites deviennent beaucoup plus rapides ...

@GeekPress mon site Web est celmetro.com et j'ai le même problème de double-clic lorsque j'active l'exécution différée de Javascript, peu importe s'il n'y a pas de scripts à retarder dans la liste.

En relation: https://secure.helpscout.net/conversation/1458853194/249184?folderId=3864740
Ils utilisent TOC Plus et adsense.
Modifié: il s'agit d'informations supplémentaires de @socialpreneur avec enregistrement d'écran sur le site concerné.

Je peux confirmer le problème sur mon site Web via Chrome mobile (ainsi que via Chrome Desktop en configurant l'outil de développement Web pour qu'il se charge en tant que mobile)