Quando clico em um link com uma âncora no desktop, a página rola até o local. No entanto, no celular (Android, FF e Chrome), a âncora é removida da URL, então não há rolagem até aquele ponto.
O que estou tentando fazer:
Temos um documento longo de diretrizes e FAQ que precisa vincular títulos. Como o Discourse remove os parâmetros id, criei um componente de tema simples que usa atributos de dados personalizados no documento de destino e escuta as âncoras na URL para rolar até o elemento com o atributo de dados correspondente.
Funciona no desktop!
No entanto, no celular, as âncoras parecem ser removidas, de modo que, ao chegar na página de destino, não há rolagem até o elemento correto. E, claro, com um documento longo, é no celular que você mais precisa dessa navegação.
Agora, notei que as âncoras geradas pelo componente Índicefuncionam quando abertas em uma nova aba. Elas não são removidas da URL e o navegador rola até o local correto.
Eu não uso Android, então não posso testar isso, mas já usei links para cabeçalhos muitas vezes e eles funcionam perfeitamente no meu iPhone. Estou curioso para saber por que você está usando âncoras de ID em vez de apenas linkar para o cabeçalho desejado?
Veja aquele -13 no final? Ele está lá porque é o décimo terceiro cabeçalho. Assim que você adicionar um novo cabeçalho mais cedo no documento, ele quebra. E, claro, se você alterar o texto do cabeçalho, ele quebra.
Quando digo “quebra”, quero dizer mudanças no documento de destino. Pelo que posso ver, esses âncoras são gerados dinamicamente quando a página é carregada. Então, se você estiver usando o plugin de índice (TOC), alterar o documento não é um problema.
No nosso caso de uso, este é um FAQ sendo vinculado. Portanto, não é incomum adicionar novas perguntas/cabeçalhos.
Mas você está correto ao afirmar que o Discourse parece detectar o padrão dessas âncoras e permite que passem. Mas se não corresponder ao padrão esperado, ele é removido.
São apenas IDs alfanuméricos comuns. Então, se eu estivesse tentando criar uma âncora para o seu exemplo acima, eu usaria apenas cloudflare-r2.