Wp-rocket: Delay JS - Links precisam ser clicados duas vezes no iOS / Safari

Tive um cliente relatando isso com o plugin Flying Scripts também.

Depois de pesquisar, descobri que há um problema no IOS com o Safari relacionado ao uso de touchstart ou touchmove sem usar touchend que torna os links problema de clique duplo (você precisa clicar em qualquer ponto da tela como primeiro clique e, em seguida, você pode clicar em qualquer link)

o link a seguir tenta destacar o problema:
https://stackoverflow.com/a/10340968

No site do cliente, fiz a seguinte alteração e resolvi o problema:
https://github.com/wp-media/wp-rocket/blob/7ec9d996f004707a57c4c8476090d5bd943051f0/assets/js/lazyload-scripts.js#L91 -L99
substitua touchmove por touchmove touchend
substitua touchstart por touchstart touchend

Depois de verificar com @hellofromtonya , ela disse: -

Este problema específico exigirá mais investigação para descobrir o porquê. Em vez de adicionar um patch ao código para esse caso específico, por que eles têm o problema e por que essa combinação específica o corrige?
Acho que o “porquê” aqui será muito valioso para garantir que não injetemos outro problema para outros clientes.

então, adicionarei o rótulo de necessidades: r & d a ser investigado.

Outro caso: https://secure.helpscout.net/conversation/1296370691/198532?folderId=377611
O cliente relata que está acontecendo no chome e no safari no celular

Tíquete relacionado: https://secure.helpscout.net/conversation/1296809928/198688/

Tíquete relacionado: https://secure.helpscout.net/conversation/1322836283/206594?folderId=2135277

Tíquete relacionado: https://secure.helpscout.net/conversation/1334490646/210819/

Tíquete relacionado: https://secure.helpscout.net/conversation/1336672544/211528/
Notas e gravação de tela nas notas. O problema ocorre nos navegadores Safari e Chrome.

Depois de pesquisar, descobri que há um problema no IOS com o Safari relacionado ao uso de touchstart ou touchmove sem usar touchend que torna os links problema de clique duplo (você precisa clicar em qualquer ponto da tela como primeiro clique e, em seguida, você pode clicar em qualquer link)

o link a seguir tenta destacar o problema:
https://stackoverflow.com/a/10340968

No site do cliente, fiz a seguinte alteração e resolvi o problema:
https://github.com/wp-media/wp-rocket/blob/7ec9d996f004707a57c4c8476090d5bd943051f0/assets/js/lazyload-scripts.js#L91 -L99

substitua touchmove por touchmove touchend
substitua touchstart por touchstart touchend
Depois de verificar com @hellofromtonya , ela disse: -

Este problema específico exigirá mais investigação para descobrir o porquê. Em vez de adicionar um patch ao código para esse caso específico, por que eles têm o problema e por que essa combinação específica o corrige?
Acho que o “porquê” aqui será muito valioso para garantir que não injetemos outro problema para outros clientes.

então, adicionarei o rótulo de necessidades: r & d a ser investigado.

Tentei essa sugestão, mas infelizmente não resolveu o problema no iOS (pelo menos para mim).

Mesmo problema. Tentei esse recurso pela primeira vez há alguns dias e recebi relatórios imediatos de que os links no iOS não funcionavam e precisavam de um toque duplo para funcionar. Tentei em 2 dispositivos iOS 14 e confirmei o problema, então desabilitado por enquanto.

Alguma atualização sobre isso?

Relacionado: https://secure.helpscout.net/conversation/1367506767/223234

Mesmo problema. Alguma atualização?

Experimentando o mesmo bug com WP-Rocket e Flying Scripts. Substituir touchstart e touchmove não ajudou.

Relacionado: https://secure.helpscout.net/conversation/1376564315/226026/

Eu tenho isso acontecendo no navegador iOS Chrome, em vez de Safari. Alguém mais pode confirmar?

Abandonamos o plugin WP Rocket por enquanto, este problema já está aberto há 3 meses e não acho que será corrigido tão cedo com a contagem de problemas abertos (+400).

Relacionado: https://secure.helpscout.net/conversation/1379195337/226677

Espero que o WP-rocket adicione a "correção" em breve :)

Alguma atualização dos desenvolvedores? Você está trabalhando nisso?

@ wp-media / dev Como estamos vendo mais e mais disso e o bug torna o recurso inutilizável, acho que precisamos priorizá-lo. Eu o adicionei ao próximo sprint para ver se podemos descobrir uma solução. 🙏

@ wp-media / dev Como estamos vendo mais e mais disso e o bug torna o recurso inutilizável, acho que precisamos priorizá-lo. Eu o adicionei ao próximo sprint para ver se podemos descobrir uma solução. 🙏

Soa bem. Esse recurso faz uma grande diferença para o meu site quando se trata de velocidade, adoraria tê-lo ativado novamente =)

@arunbasillal não, o problema está marcado como P&D necessário, não pode fazer parte de um sprint. Para que um problema faça parte de um sprint, ele precisa ser totalmente preparado primeiro.

@ wp-media / dev Como estamos vendo mais e mais disso e o bug torna o recurso inutilizável, acho que precisamos priorizá-lo. Eu o adicionei ao próximo sprint para ver se podemos descobrir uma solução. 🙏

Obrigado! Eu realmente amo esse recurso - seria incrível se ele pudesse ser usado em todos os meus sites!

@ wp-media / productrocket Alguns feedbacks da equipe sobre isso:

• Isso é complicado devido à maneira como o iOS funciona.
• O fato é que as telas sensíveis ao toque não têm uma boa alternativa de pairar, além de talvez tocar e segurar - mas pelo menos em dispositivos iOS, isso tem seu próprio significado (carrega um quadro de visualização do destino do link).
• Ahmed mergulhou profundamente nisso também antes, a única solução é usar o tempo limite como scripts de vôo

Como não há solução para isso sem mudanças significativas na forma atual de funcionamento desse recurso, é necessário pensar mais antes de prosseguir.

Need and mouseWheel event e setTimeOut. Em scripts mouseweel como o Infinite Scroll e outros scripts, não funciona corretamente, não carregando a próxima página se apenas mousewhell. Em geral, isso se aplica a todos os scripts e é crítico.
Atrasar JS sem setTimeOut também causa problemas, além de links que precisam ser clicados duas vezes. Exemplo: No segmento russo, motor de busca Yandex. O contador pode usar um visualizador da web, este é um registro das ações do usuário. Assim, o script não deve ser atrasado: já que ao visualizar as ações do usuário, deve-se carregar o script do contador no site. E naturalmente não carrega porque nenhuma ação, nenhum 'keydown', 'mouseover', 'touchmove', 'touchstart' ocorrem no visualizador.

Eu realmente gostaria de saber como a equipe WP Rocket está considerando isso, mas pelo menos a opção de carregamento automático após x segundos é obrigatória até que o iOS corrige o problema.

@ wp-media / productrocket Alguns feedbacks da equipe sobre isso:

• Isso é complicado devido à maneira como o iOS funciona.
• O fato é que as telas sensíveis ao toque não têm uma boa alternativa de pairar, além de talvez tocar e segurar - mas pelo menos em dispositivos iOS, isso tem seu próprio significado (carrega um quadro de visualização do destino do link).
• Ahmed mergulhou profundamente nisso também antes, a única solução é usar o tempo limite como scripts de vôo

Como não há solução para isso sem mudanças significativas na forma atual de funcionamento desse recurso, é necessário pensar mais antes de prosseguir.

Algum cronograma para a implementação da solução de tempo limite?

Carregar scripts após X segundos não é a solução. Fazer isso é exatamente o oposto do interesse desse recurso. Se conseguirmos encontrar uma solução sem fazer isso, tentaremos continuar por este caminho.

@arunbasillal @ engahmeds3ed Você poderia refazer alguns testes?

Estou perguntando porque também tivemos o mesmo problema com nosso site. Mas desde a semana passada, não temos mais o problema. É a coincidência de lançar nosso novo site ou uma atualização do iOS?

Algum cronograma para a implementação da solução de tempo limite?

Não podemos fornecer nenhum HEC.

@GeekPress Quando vejo seu site com o Chrome usando o tamanho da janela móvel fornecido pela ferramenta Dev (existe algum nome oficial para este recurso? Talvez visualização móvel?), A rolagem com dois dedos nunca aciona scripts atrasados, incluindo análises. E para os problemas de duplo clique neste tópico, qual página e link você testou? A página inicial?

@GeekPress Quando vejo seu site com o Chrome usando o tamanho da janela móvel fornecido pela ferramenta Dev (existe algum nome oficial para este recurso? Talvez visualização móvel?), A rolagem com dois dedos nunca aciona scripts atrasados, incluindo análises. E para os problemas de duplo clique neste tópico, qual página e link você testou? A página inicial?

Não acho que o teste com o Mobile Preview na Chrome Developer Tool dê o mesmo resultado que o teste real em um dispositivo iOS devido à diferença nos gestos de toque.

@Roboonl Você está certo, eles deveriam ser diferentes. E eu não estou fazendo isso. Eu simplesmente me pergunto se está OK para o WP Rocket que os scripts nunca sejam carregados sob certas condições.

O setTimeOut é necessário, ou melhor, necessário.

relacionado: https://secure.helpscout.net/conversation/1406743456/234374/

Caso relacionado: https://secure.helpscout.net/conversation/1405169718/233859/

Navegador: Safari e Chrome
Dispositivo: iPhone 11 Pro

Adicionar o gatilho de tempo limite também resolveria https://github.com/wp-media/wp-rocket/issues/3420

Adicionar o gatilho de tempo limite também resolveria # 3420

@piotrbak Não tenho certeza se o # 3420 está relacionado a este problema. Consertando # 3454 devo achar que consertando # 3420

@GeekPress Pelo que entendi, os usuários estavam navegando na página da Web e o Delay JS não foi acionado. O script do Google Analytics ainda não foi carregado.

Parece que você está certo sobre o https://github.com/wp-media/wp-rocket/issues/3454, que também está relacionado a celulares. Provavelmente qualquer um desses problemas resolveria o https://github.com/wp-media/wp-rocket/issues/3420
Obrigado

Qualquer atualização?

@arunbasillal Você não pode adicionar uma opção no WP-rocket para que isso exclua em certas páginas enquanto isso?
Como o Flying Scripts, eles ainda têm a opção de excluir o Delay JS para certas páginas com palavras-chave.

outro caso:
https://secure.helpscout.net/conversation/1417928403/237257?folderId=2683093

Não acho que o teste com o Mobile Preview na Chrome Developer Tool dê o mesmo resultado que o teste real em um dispositivo iOS devido à diferença nos gestos de toque.

@Roboonl Foi testado em um dispositivo móvel real. Experimente nosso site no celular, você não precisa clicar duas vezes.

@roberthedlund Eu deveria ter perdido algo, não acho nenhuma maneira no Flying Script de ter palavras-chave baseadas em páginas.

Não acho que o teste com o Mobile Preview na Chrome Developer Tool dê o mesmo resultado que o teste real em um dispositivo iOS devido à diferença nos gestos de toque.

@Roboonl Foi testado em um dispositivo móvel real. Experimente nosso site no celular, você não precisa clicar duas vezes.

@roberthedlund Eu deveria ter perdido algo, não acho nenhuma maneira no Flying Script de ter palavras-chave baseadas em páginas.

https://ibb.co/qYVyhh6

@roberthedlund Bem, você já pode fazer isso com o WP Rocket também. Basta ir para a tela de edição da página, abrir a metabox «WP Rocket Options» e desligar a opção Delay JS Execution.

@roberthedlund Bem, você já pode fazer isso com o WP Rocket também. Basta ir para a tela de edição da página, abrir a metabox «WP Rocket Options» e desligar a opção Delay JS Execution.

Sim, mas não é o ideal para fazer isso manualmente em mais de 100 páginas para um exemplo.

Qualquer atualização?

Este problema ainda está disponível com a versão 3.8.6 do Chrome no Android. Acabei de tentar Fying Scripts, mas esse bug de clique duplo não aconteceu. Para iOS, mesmo com Flying Scripts, os visualizadores precisam clicar duas vezes.

Qualquer atualização? Acho estranho que você ainda não tenha informado os usuários do WP-rocket de forma alguma sobre o problema. É difícil inserir um aviso antes que as pessoas ativem o recurso Delay JS? Tenho visto tantos usuários em vários fóruns que ainda não sabem que estão sofrendo do problema antes de eu entrar em contato com eles sobre isso. É um grande problema e acho que você deve avisar sobre isso.

@socialpreneur Para iOS, você está experimentando em um celular real, e não com uma simulação?

Por que estou fazendo a pergunta?

Tento novamente no meu iPhone 8 pessoal e não preciso clicar duas vezes em todos os sites que experimentei que tinham Delay JS, incluindo nosso próprio site.

@GeekPress No celular real, incluindo eu e o telefone do meu cliente, então tive que desabilitar o Delay JS completamente. Os scripts voadores também não funcionaram, então estou supondo que esta seja uma limitação do iOS no momento.

Adicionado: parece que há algum script externo ou interno que está causando esse problema. Nem todos os sites que usam Delay JS de WP Rocket ou Flying Scripts apresentam esses sintomas de clique duplo. Até o momento dois sites que não apresentam esse problema não usam o adsense. Acho que precisaremos reunir mais casos para descobrir qual é a causa.

@GeekPress

@socialpreneur Para iOS, você está experimentando em um celular real, e não com uma simulação?

Por que estou fazendo a pergunta?

Tento novamente no meu iPhone 8 pessoal e não preciso clicar duas vezes em todos os sites que experimentei que tinham Delay JS, incluindo nosso próprio site.

Eu tentei em muitos sites que usam Delay JS e tentei em telefones reais. iPhone 8, iPhone SE, iPhone 11 e todos eles tinham esse problema. Às vezes funciona no primeiro "clique", então os outros param totalmente de funcionar. Portanto, o problema é real.

@socialpreneur Já experimentou em nosso site (https://wp-rocket.me)? Como eu disse, não consigo reproduzir o problema depois de tentar em alguns sites.

Posso saber a versão do iOS que você está usando?

@GeekPress Nem tudo que você vê é a verdade. Se pelo menos um usuário do WP Rocket está tendo o problema, então precisamos fazer tudo e qualquer coisa para resolver o problema. Meu iOS é 14,4, e vou pedir ao meu cliente sua versão iOS. Como eu disse, como isso está acontecendo em todos os plug-ins Delay JS existentes (WP Rocket, Flying Scripts, Perfmatters) em determinados sites com determinados scripts, essa não é apenas a sua causa.

Pode ser o navegador, mas quando vejo este problema de duplo clique, não é apenas iOS, mas eu tenho no meu Android e seu Chrome, então claramente não é apenas o iOS nem o Safari problema. Só espero que possamos criar algum pequeno hack ou functions.php adicional para contornar esse problema em certos sites.

Avisarei você se encontrar alguma coisa.

Adicionado 1: OK, aqui está o terceiro site que está apresentando problemas. Talvez eu possa restringir alguns scripts comuns.

Adicionado 2: até agora, apenas ativar o Delay JS não acionará esse problema.

Mas quando eu defino alguns scripts, duplo clique / toque começa a acontecer.

Adicionado 3: Tudo bem, aqui está o que eu encontrei. Quando eu adiciono "sumário", o clique duplo é acionado. Pode não ser o mesmo para todos os outros usuários que estão relatando isso, mas até agora esta é uma das palavras-chave. Table of Contents Plus é o nome do plugin.

Adicionado 4: Boas notícias. Outro site com o mesmo problema também está usando o TOC Plus. @GeekPress , teste-o com este plugin habilitado. E diga a todas as suas equipes de suporte para confirmar se os usuários com o mesmo problema também estão usando este plugin em seus sites. ASSIM QUE POSSÍVEL.

Adicionado 5: Consegui resolver este problema para um dos sites não atrasando o script TOC Plus. Mas a mesma solução não funcionou para outro site, então parece que há mais alguns scripts que não são fáceis de atrasar.

Adicionado 6: Tenho a sensação de que a versão do jquery pode estar tomando parte neste problema. Um site em funcionamento usa a versão mais recente e o outro site que não funciona usa a versão antiga (/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp). Depurando ainda mais ...

@GeekPress Além do TOC Plus, também descobri que o adsense é a causa do duplo clique / toque. Eu testei com alguns sites, e todos os sites com diferentes temas / plug-ins têm o mesmo. Isso acontece com todas as palavras-chave do AdSense abaixo.

• googlesyndication
• Anúncios do Google
• adsbygoogle.js

Reproduzir

1. Construa um site de teste com adsense em qualquer lugar, acima da dobra ou não.
2. Atualize a página, toque no logotipo / texto do cabeçalho ou no ícone do menu móvel. Neste ponto, o adsense é carregado, mas não abre o menu com um toque.

Solução

Não tenho certeza de que isso parece como o script do adsense é projetado. Uma solução alternativa considerável é:

1. Carregue o adsense sempre após 1 segundo. portanto, a maioria dos usuários não enfrentará esse problema.
2. Pré-carregar o adsense ao passar o mouse (não tenho certeza se isso funcionaria no toque do celular)
3. Diga aos usuários para não monetizarem com o AdSense, para que os sites fiquem muito mais rápidos ...

@GeekPress meu site é celmetro.com e tenho o mesmo problema de duplo clique quando habilito Delay Javascript Execution, não importa se não há scripts para atrasar na lista.

Relacionado: https://secure.helpscout.net/conversation/1458853194/249184?folderId=3864740
Eles usam TOC Plus e adsense.
Editado: esta é uma informação adicional de @socialpreneur com gravação de tela no site afetado.

Posso confirmar o problema no meu site via Chrome para celular (bem como via Chrome Desktop, configurando a ferramenta web dev para carregar como celular)