Onde estava o problema do clique

O que estava acontecendo

• Aquele anel que fica pulsando em volta do botão do WhatsApp é só enfeite. Só que o navegador tratava ele como área de toque, igual a qualquer botão.
• O anel cresce 70% além do botão. O botão tem 56 pixels de largura, mas a área que capturava o toque chegava a 95.
• Por isso ele invadia a borda do botão de compra sem dar a impressão de estar encostando. No olho, os dois pareciam separados.
• E como o anel pulsa, ele crescia e sumia o tempo todo. O mesmo toque, no mesmo lugar, às vezes abria o checkout e às vezes abria o WhatsApp. É por isso que ninguém nunca conseguiu reproduzir o erro na hora de mostrar pra outra pessoa.

A prova, no print

Testei toque por toque dentro do botão de compra, na página real, no celular. Cada bolinha é um toque medido.

Quanto era, em número

Varri as páginas de 90 em 90 pixels, em sete tamanhos de tela, medindo quem recebia o toque em cada ponto dos botões.

São pontos de toque perdidos dentro dos botões, não visitas. Serve pra medir o tamanho da área que estava sendo roubada.

Toca aqui e sente

Os dois quadros são iguais, menos por um detalhe. Toca na borda direita do botão laranja, bem coladinho no verde, nos dois.

Como foi resolvido

Foram três camadas, pra não depender de uma coisa só:

• O anel decorativo não recebe mais toque nenhum.
• O botão de suporte sai da frente sozinho enquanto estiver encostando em algum botão de compra, e volta quando passa.
• Mesmo se as duas primeiras falharem, o botão de compra fica por cima na ordem de empilhamento. O toque vai pro lugar certo de qualquer jeito.

O WhatsApp continua no ar e funcionando, testado em sete tamanhos de tela.

Onde mais aparece

O mesmo botão foi reaproveitado em outras páginas nossas: versões antigas do site do Summit e rascunhos que não recebem tráfego hoje. Já estão mapeadas e entram na fila.