Wp-rocket: Delay JS - ссылки необходимо дважды щелкнуть в iOS / Safari.

Созданный на 24 сент. 2020  ·  56Комментарии  ·  Источник: wp-media/wp-rocket

Перед отправкой сообщения о проблеме убедитесь, что вы выполнили следующие шаги:

  • Убедился, что у вас последняя версия latest
  • Использовал функцию поиска, чтобы убедиться, что об ошибке не сообщалось раньше 👍

Опишите ошибку
В браузере Safari в iOS (и, возможно, в других, в зависимости от одного клиента), когда включена задержка JS, ссылки необходимо дважды щелкнуть, чтобы они заработали. Это даже когда:

  • в текстовой области JS задержки нет никаких ключевых слов.
  • предварительная загрузка ссылок отключена.
  • протестировано на последней версии iOS и Safari.

Воспроизводить
Шаги по воспроизведению поведения:

  • Включить задержку JS
  • На iPhone или в BrowserStack используйте Safari для посещения страницы.
  • Прокрутите вниз (важно) и попробуйте щелкнуть ссылку. Только второй щелчок зарегистрирует и откроет страницу.

Обратите внимание, что если вы щелкнете ссылку, которая находится в области просмотра, то есть без прокрутки, она откроется немедленно.

Ожидаемое поведение
Ссылки должны загружаться как обычно и не требуют двух щелчков мышью.

Скриншоты
Скринкаст: https://youtu.be/D1Pp45wLMhE (спасибо @vmanthos за этот и большую часть этого отчета)

Дополнительный контекст
Пожалуйста, посмотрите эту заметку Василиса для получения дополнительной информации - https://secure.helpscout.net/conversation/1283702266/195256/#thread -3691038967

Потенциально связанные билеты:

Обработка бэклога (только для команды разработчиков WP Media)

  • [] Воспроизвести проблему
  • [] Определите основную причину
  • [] Найдите решение
  • [] Оцените усилия
file optimization high major bug waiting for feedback

Самый полезный комментарий

После поиска я понял, что в IOS есть проблема с Safari, связанная с использованием touchstart или touchmove без использования touchend которые вызывают проблему двойного щелчка по ссылкам (вам нужно нажать в любой точке экрана при первом нажатии, затем вы можете щелкнуть любую ссылку)

следующая ссылка пытается выделить проблему:
https://stackoverflow.com/a/10340968

На сайте клиента я внес следующие изменения и решил проблему:
https://github.com/wp-media/wp-rocket/blob/7ec9d996f004707a57c4c8476090d5bd943051f0/assets/js/lazyload-scripts.js#L91 -L99
заменить touchmove на touchmove touchend
заменить touchstart на touchstart touchend

После проверки с @hellofromtonya она сказала: -

Этот конкретный вопрос потребует дополнительного исследования, чтобы выяснить, почему. Вместо того, чтобы добавлять патч в код для этого конкретного пограничного случая, почему у них есть проблема и почему эта конкретная комбинация исправляет ее?
Я думаю, что здесь «почему» будет очень ценно, чтобы гарантировать, что мы не создадим еще одной проблемы для других клиентов.

поэтому я добавлю ярлык need: r & d для исследования.

Все 56 Комментарий

У меня был клиент, сообщавший об этом с помощью плагина Flying Scripts.

После поиска я понял, что в IOS есть проблема с Safari, связанная с использованием touchstart или touchmove без использования touchend которые вызывают проблему двойного щелчка по ссылкам (вам нужно нажать в любой точке экрана при первом нажатии, затем вы можете щелкнуть любую ссылку)

следующая ссылка пытается выделить проблему:
https://stackoverflow.com/a/10340968

На сайте клиента я внес следующие изменения и решил проблему:
https://github.com/wp-media/wp-rocket/blob/7ec9d996f004707a57c4c8476090d5bd943051f0/assets/js/lazyload-scripts.js#L91 -L99
заменить touchmove на touchmove touchend
заменить touchstart на touchstart touchend

После проверки с @hellofromtonya она сказала: -

Этот конкретный вопрос потребует дополнительного исследования, чтобы выяснить, почему. Вместо того, чтобы добавлять патч в код для этого конкретного пограничного случая, почему у них есть проблема и почему эта конкретная комбинация исправляет ее?
Я думаю, что здесь «почему» будет очень ценно, чтобы гарантировать, что мы не создадим еще одной проблемы для других клиентов.

поэтому я добавлю ярлык need: r & d для исследования.

Другой случай: https://secure.helpscout.net/conversation/1296370691/198532?folderId=377611
Клиент сообщает, что это происходит в чоме и сафари на мобильном телефоне.

Связанный билет: https://secure.helpscout.net/conversation/1336672544/211528/
Заметки и запись экрана в заметках. Проблема возникает как в браузерах Safari, так и в Chrome.

После поиска я понял, что в IOS есть проблема с Safari, связанная с использованием touchstart или touchmove без использования touchend которые вызывают проблему двойного щелчка по ссылкам (вам нужно нажать в любой точке экрана при первом нажатии, затем вы можете щелкнуть любую ссылку)

следующая ссылка пытается выделить проблему:
https://stackoverflow.com/a/10340968

На сайте клиента я внес следующие изменения и решил проблему:
https://github.com/wp-media/wp-rocket/blob/7ec9d996f004707a57c4c8476090d5bd943051f0/assets/js/lazyload-scripts.js#L91 -L99

заменить touchmove на touchmove touchend
заменить touchstart на touchstart touchend
После проверки с @hellofromtonya она сказала: -

Этот конкретный вопрос потребует дополнительного исследования, чтобы выяснить, почему. Вместо того, чтобы добавлять патч в код для этого конкретного пограничного случая, почему у них есть проблема и почему эта конкретная комбинация исправляет ее?
Я думаю, что здесь «почему» будет очень ценно, чтобы гарантировать, что мы не создадим еще одной проблемы для других клиентов.

поэтому я добавлю ярлык need: r & d для исследования.

Я попробовал это предложение, но, к сожалению, оно не решило проблему на iOS (по крайней мере, для меня).

Та же проблема. Впервые попробовал эту функцию несколько дней назад и сразу получил сообщения о том, что ссылки на iOS не работают и для работы требуется двойное нажатие. Пробовал на двух устройствах iOS 14 и подтвердил, что проблема отключена.

Есть обновления по этому поводу?

Та же проблема. Любые обновления?

Возникла одна и та же ошибка с WP-Rocket и Flying Scripts. Замена touchstart и touchmove не помогла.

У меня это происходит в браузере iOS Chrome, а не в Safari. Кто-нибудь еще может подтвердить?

На данный момент мы отказались от плагина WP Rocket, эта проблема уже открыта в течение 3 месяцев, и я не думаю, что она будет исправлена ​​в ближайшее время с текущим количеством открытых проблем (+400).

Надеюсь, что WP-rocket скоро добавит "исправление" :)

Есть обновления от разработчиков? Вы над этим работаете?

@ wp-media / dev Поскольку мы наблюдаем все больше и больше этого, и поскольку ошибка делает эту функцию совершенно непригодной для использования, я думаю, нам нужно расставить приоритеты. Я добавил его в следующий спринт, чтобы посмотреть, сможем ли мы найти решение. 🙏

@ wp-media / dev Поскольку мы наблюдаем все больше и больше этого, и поскольку ошибка делает эту функцию совершенно непригодной для использования, я думаю, нам нужно расставить приоритеты. Я добавил его в следующий спринт, чтобы посмотреть, сможем ли мы найти решение. 🙏

Звучит отлично. Эта функция имеет большое значение для моего сайта, когда дело доходит до скорости, хотелось бы, чтобы она снова активировалась =)

@arunbasillal нет, проблема помечена как нуждающаяся в НИОКР, она не может быть частью спринта. Чтобы проблема стала частью спринта, сначала ее необходимо полностью проработать.

@ wp-media / dev Поскольку мы наблюдаем все больше и больше этого, и поскольку ошибка делает эту функцию совершенно непригодной для использования, я думаю, нам нужно расставить приоритеты. Я добавил его в следующий спринт, чтобы посмотреть, сможем ли мы найти решение. 🙏

Спасибо! Мне очень нравится эта функция - было бы здорово, если бы ее можно было использовать на всех моих сайтах!

@ wp-media / productrocket Некоторые отзывы команды по этому поводу:

  • Это сложно из-за того, как работает iOS.
  • Дело в том, что у сенсорных экранов действительно нет хорошей альтернативы наведению, кроме, возможно, касания и удержания - но, по крайней мере, на устройствах iOS это имеет свое значение (он загружает кадр предварительного просмотра места назначения ссылки).
  • Ахмед глубоко погружался в это и раньше, единственное решение - использовать тайм-аут, например, летающие скрипты.

Поскольку это невозможно исправить без существенных изменений в текущем способе работы этой функции, необходимо подумать над этим, прежде чем двигаться дальше.

Need и событие mouseWheel и setTimeOut. В скриптах mouseweel, таких как Infinite Scroll и других скриптах, работает некорректно, следующая страница не загружается, если только mousewhell. В общем, это касается всех скриптов, и это критично.
Задержка JS без setTimeOut тоже вызывает проблемы, к тому же ссылки нужно нажимать дважды. Пример: в российском сегменте поисковая система Яндекс. Счетчик может использовать веб-просмотрщик, это запись действий пользователя. Соответственно, откладывать скрипт не стоит: т.к. при просмотре действий пользователя должен загружаться скрипт счетчика на сайте. И он, естественно, не загружается, потому что в средстве просмотра не происходит никаких действий, никаких «нажатий клавиши», «наведения мыши», «touchmove», «touchstart».

Я действительно хотел бы знать, как команда WP Rocket рассматривает это, но, по крайней мере, опция автоматической загрузки скриптов через x секунд является обязательной, пока iOS не исправит проблему.

@ wp-media / productrocket Некоторые отзывы команды по этому поводу:

  • Это сложно из-за того, как работает iOS.
  • Дело в том, что у сенсорных экранов действительно нет хорошей альтернативы наведению, кроме, возможно, касания и удержания - но, по крайней мере, на устройствах iOS это имеет свое значение (он загружает кадр предварительного просмотра места назначения ссылки).
  • Ахмед глубоко погружался в это и раньше, единственное решение - использовать тайм-аут, например, летающие скрипты.

Поскольку это невозможно исправить без существенных изменений в текущем способе работы этой функции, необходимо подумать над этим, прежде чем двигаться дальше.

Есть ли график реализации решения по тайм-ауту?

Загрузка скриптов через X секунд не является решением. Это прямо противоположно интересам этой функции. Если мы сможем найти решение, не делая этого, мы постараемся продолжить этот путь.

@arunbasillal @ engahmeds3ed Не могли бы вы повторить некоторые тесты?

Я спрашиваю, у нас была такая же проблема с нашим сайтом. Но с прошлой недели у нас больше нет проблемы. Это совпадение с выпуском нашего нового веб-сайта или обновления iOS?

Есть ли график реализации решения по тайм-ауту?

Мы не можем предоставить расчетное время прибытия.

@GeekPress Когда я просматриваю ваш сайт в Chrome, используя размер мобильного окна, предоставляемый инструментом Dev (есть ли официальное название для этой функции? Возможно, предварительный просмотр для мобильных устройств?), Прокрутка двумя пальцами никогда не запускает отложенные скрипты, включая аналитику. А что касается проблем с двойным щелчком в этой теме, какую страницу и ссылку вы тестировали? Верхняя страница?

@GeekPress Когда я просматриваю ваш сайт в Chrome, используя размер мобильного окна, предоставляемый инструментом Dev (есть ли официальное название для этой функции? Возможно, предварительный просмотр для мобильных устройств?), Прокрутка двумя пальцами никогда не запускает отложенные скрипты, включая аналитику. А что касается проблем с двойным щелчком в этой теме, какую страницу и ссылку вы тестировали? Верхняя страница?

Я не думаю, что тестирование с помощью Mobile Preview в Chrome Developer Tool дает тот же результат, что и фактическое тестирование на устройстве iOS, из-за разницы в сенсорных жестах.

@Roboonl Вы правы, они должны быть разными. И я этого не делаю. Мне просто интересно, нормально ли для WP Rocket, что скрипты никогда не загружаются при определенных условиях.

SetTimeOut нужен, вернее, необходим.

Связанный случай: https://secure.helpscout.net/conversation/1405169718/233859/

Браузер: Safari и Chrome
Устройство: iPhone 11 Pro

Добавление триггера тайм-аута также разрешит https://github.com/wp-media/wp-rocket/issues/3420

Добавление триггера тайм-аута также разрешит # 3420

@piotrbak Не уверен, что № 3420 связан с этой проблемой. Исправление № 3454, я думаю, исправление № 3420

@GeekPress Насколько я понимаю, пользователи прокручивали веб-страницу, и Delay JS не запускался. Скрипт Google Analytics тогда не загружался.

Похоже, вы правы насчет https://github.com/wp-media/wp-rocket/issues/3454, это тоже связано с мобильными телефонами. Вероятно, любая из этих проблем решит https://github.com/wp-media/wp-rocket/issues/3420
Спасибо

Есть обновления?

@arunbasillal Не могли бы вы добавить опцию в WP-rocket, чтобы исключить это на определенных страницах в то же время?
Как и в Flying Scripts, у них даже есть возможность исключить Delay JS для определенных страниц с ключевыми словами.

Я не думаю, что тестирование с помощью Mobile Preview в Chrome Developer Tool дает тот же результат, что и фактическое тестирование на устройстве iOS, из-за разницы в сенсорных жестах.

@Roboonl Протестировано на реальном мобильном устройстве. Пожалуйста, попробуйте наш сайт на мобильном телефоне, вам не нужно нажимать два раза.

@roberthedlund Я должен был что-то пропустить, я не нахожу способа с Flying Script иметь ключевые слова, основанные на страницах.

Я не думаю, что тестирование с помощью Mobile Preview в Chrome Developer Tool дает тот же результат, что и фактическое тестирование на устройстве iOS, из-за разницы в сенсорных жестах.

@Roboonl Протестировано на реальном мобильном устройстве. Пожалуйста, попробуйте наш сайт на мобильном телефоне, вам не нужно нажимать два раза.

@roberthedlund Я должен был что-то пропустить, я не нахожу способа с Flying Script иметь ключевые слова, основанные на страницах.

https://ibb.co/qYVyhh6

@roberthedlund Что ж, вы уже можете сделать это и с WP Rocket. Вам просто нужно перейти на экран редактирования страницы, открыть метабокс «WP Rocket Options» и отключить опцию Delay JS Execution.

@roberthedlund Что ж, вы уже можете сделать это и с WP Rocket. Вам просто нужно перейти на экран редактирования страницы, открыть метабокс «WP Rocket Options» и отключить опцию Delay JS Execution.

Да, но не идеально, чтобы делать это вручную, например, на более чем 100 страницах.

Есть обновления?

Эта проблема по-прежнему доступна в версии 3.8.6 с Chrome на Android. Я просто попробовал Fying Scripts, но этого бага с двойным щелчком не произошло. Для iOS, даже с летающими скриптами, зрители должны дважды щелкать мышью.

Есть обновления? Мне кажется странным, что вы до сих пор никак не проинформировали пользователей WP-rocket о проблеме. Насколько сложно ввести предупреждение, прежде чем люди активируют функцию Delay JS? Я видел так много пользователей на различных форумах, которые еще не знали, что они страдают от этой проблемы, прежде чем я связался с ними по этому поводу. Это довольно большая проблема, и я думаю, вам стоит об этом предупредить.

@socialpreneur Для iOS вы примеряете настоящий мобильный телефон, а не симуляцию?

Почему я задаю вопрос?

Я снова пробую снова на своем личном iPhone 8, и мне не нужно дважды щелкать по всем веб-сайтам, которые я пробовал, на которых был Delay JS, включая наш собственный.

@GeekPress На реальном мобильном телефоне, включая меня и телефон моего клиента, поэтому мне пришлось полностью отключить Delay JS. Летающие скрипты тоже не работали, так что я предполагаю, что сейчас это ограничение iOS.

Добавлено: похоже, что есть какой-то внешний или внутренний скрипт, который вызывает эту проблему. Не каждый сайт, который использует Delay JS WP Rocket или Flying Scripts, имеет эти симптомы двойного щелчка. Пока что два сайта, у которых нет этой проблемы, не используют AdSense. Я думаю, нам нужно собрать больше случаев, чтобы выяснить, в чем причина.

@GeekPress

@socialpreneur Для iOS вы примеряете настоящий мобильный телефон, а не симуляцию?

Почему я задаю вопрос?

Я снова пробую снова на своем личном iPhone 8, и мне не нужно дважды щелкать по всем веб-сайтам, которые я пробовал, на которых был Delay JS, включая наш собственный.

Я пробовал на множестве веб-сайтов, использующих Delay JS, и пробовал на реальных телефонах. iPhone 8, iPhone SE, iPhone 11 и все они имели эту проблему. Иногда срабатывает по первому «щелчку», а остальные полностью перестают работать. Так что проблема реальная.

@socialpreneur Вы пробовали на нашем сайте (https://wp-rocket.me)? Как я уже сказал, я не могу воспроизвести проблему после попытки на нескольких веб-сайтах.

Могу я узнать, какую версию iOS вы используете?

@GeekPress Не все, что вы видите, правда. Если хотя бы у одного пользователя WP Rocket возникла проблема, нам нужно сделать все возможное, чтобы решить эту проблему. У меня iOS 14.4, и я спрошу у своего клиента его версию iOS. Как я уже сказал, поскольку это происходит во всех плагинах Delay JS (WP Rocket, Flying Scripts, Perfmatters) на определенном сайте с определенными скриптами, это не только ваша причина.

Это может быть браузер, но когда я вижу эту проблему с двойным щелчком, это не только iOS, но у меня она есть на моем Android и Chrome, поэтому явно не только проблема iOS или Safari. Я просто надеюсь, что мы сможем придумать небольшой хак или дополнительный functions.php, чтобы обойти эту проблему на определенных сайтах.

Я дам тебе знать, если найду что-нибудь.

Добавлено 1: Хорошо, вот третий сайт, на котором возникла проблема. Может быть, я смогу сузить несколько общих сценариев.

Добавлено 2: пока что простое включение Delay JS не вызовет этой проблемы.
delayjs

Но когда я устанавливаю несколько скриптов, начинается двойной щелчок / касание.
delayjs2

Добавлено 3: Хорошо, вот что я нашел. Когда я добавляю "оглавление", срабатывает двойной щелчок. Это может быть не то же самое для всех других пользователей, которые сообщают об этом, но пока это одно из ключевых слов. Table of Contents Plus - это название плагина.

Добавлено 4: Хорошие новости. Другой сайт, имеющий такую ​​же проблему, также использует TOC Plus. @GeekPress , пожалуйста, протестируйте его с включенным плагином. И попросите всю свою службу поддержки подтвердить, что пользователи, имеющие такую ​​же проблему, также используют этот плагин на своих сайтах. КАК МОЖНО СКОРЕЕ.

Добавлено 5: мне удалось решить эту проблему для одного из сайтов, не откладывая сценарий TOC Plus. Но то же решение не сработало для другого сайта, поэтому, похоже, есть еще несколько скриптов, не поддерживающих задержку.

Добавлено 6: у меня такое чувство, что версия jquery может частично решить эту проблему. Один рабочий сайт использует последнюю версию, а другой неработающий сайт использует старую версию (/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp). Дальнейшая отладка подробнее ...

@GeekPress Помимо TOC Plus, я также обнаружил, что AdSense является причиной двойного щелчка / касания. Я тестировал несколько сайтов, и все сайты с разными темами / плагинами одинаковы. Это происходит с любыми нижеприведенными ключевыми словами AdSense.

  • поиск в Google
  • реклама
  • adsbygoogle.js

Воспроизвести

  1. Создайте тестовый сайт с AdSense где угодно, в верхней части страницы или нет.
  2. Обновите страницу, нажмите на логотип / текст заголовка или значок мобильного меню. В этот момент загружается AdSense, но он не открывает меню одним нажатием.

Решение

Я не уверен, так как кажется, как разработан сценарий AdSense. Значительный обходной путь:

  1. Загружать AdSense всегда через 1 сек. поэтому большинство пользователей не столкнутся с этой проблемой.
  2. Предварительная загрузка AdSense при наведении курсора мыши (не уверен, что это будет работать на мобильном устройстве)
  3. Скажите пользователям не монетизировать с помощью AdSense, чтобы сайты работали намного быстрее ...

@GeekPress, мой веб-сайт - celmetro.com, и у меня такая же проблема с двойным щелчком, когда я включаю Delay Javascript Execution, не имеет значения, если в списке нет скриптов для задержки.

По теме: https://secure.helpscout.net/conversation/1458853194/249184?folderId=3864740
Они используют TOC Plus и AdSense.
Отредактировано: это дополнительная информация от @socialpreneur с записью экрана на затронутом сайте.

Я могу подтвердить проблему на своем веб-сайте через мобильное устройство Chrome (а также через Chrome Desktop, настроив инструмент веб-разработчика для загрузки как мобильного устройства)

Была ли эта страница полезной?
0 / 5 - 0 рейтинги