tabnews.com.br
tabnews.com.br copied to clipboard
filipedeschamps
Visualização de Diagrama Mermaid bugada em dispositivos móveis
Descrição
No dia 26/02/2024, publiquei o post [Dúvida] Qual a melhor estratégia para reutilizar código em diferentes projetos?, após publicar fui dar uma última revisada para conferir se estava tudo certinho, porém a visualização no celular estava bugada, eu escrevi a publicação pelo PC, tanto ao escrever quanto para visualizar não houve problemas, porém no celular sim, testei também em um Tablet (Samsung Galaxy Tab S7 FE) e não houve erros. Utilizo um Web App instalado utilizando o Google Chrome, e testei também no Microsoft Edge, abaixo tem um vídeo reproduzindo o bug visual:
https://github.com/filipedeschamps/tabnews.com.br/assets/73134662/f900588e-2052-440d-a39b-a06b75808309
Ao abrir o post pela primeira vez ou recarregar a página, partes da página ficam repetidas e cortadas, porém ao fechar e abrir, o conteúdo volta a ser exibido normalmente.
Dispositivo:
- Xiaomi Poco X3 GT
- Android 13 TP1A.220624.014
- MIUI Global 14.0.5
- Chrome 122.0.6261
- Edge 121.0.2277.133
Passos para reproduzir o problema
- Em um dispositivo Android, acessar o post [Dúvida] Qual a melhor estratégia para reutilizar código em diferentes projetos?
- Recarregue a página
- Abra o histórico de apps abertos e abra novamente o navegador com o post aberto
Navegadores testados
Chrome, Microsoft Edge
Possível solução
Uso o TabNews no celular há meses e nunca tive um bug desse tipo, eu chuto ser os diagramas Mermaid junto com alguma estilização para o tamanho da tela, já que tanto no PC como no Tablet a visualização está normal.
@marlonangeli, obrigado por reportar! 💪
O problema ocorre apenas em um dos seus dispositivos? Alguma chance de ser um problema recente com esse dispositivo específico? Eu ainda não consegui reproduzir.
Uma informação importante é que já há mais de 10 meses desde a última atualização do visualizador de markdown (e do plugin Mermaid).
Agradeço muito se puder fazer mais testes e trazer mais dados. 🤝
Não sei se é um defeito apenas da gravação de tela, mas no vídeo é possível ver o mesmo bug ocorrendo com o texto, então não deve ter relação com os diagramas Mermaid.
Está acontecendo apenas com o TabNews? Repare nestes dois pontos do seu vídeo:
Eu já reparei um problema similar que acontece apenas em dispositivos móveis no Safari (não tenho Mac para testar no PC), com o ícone de "ir para o topo". Quando isso acontece, tem a ver com o menu de navegação inferior sumindo e aparecendo conforme os gestos feitos.
Eu não consegui reproduzir o problema desse issue, e não sei se tem a mesma causa do que mencionei acima.
Testei novamente aqui, agora tem apenas alguns "engasgos" no início, mas ao clicar no botão do usuário voltam a ter os mesmos bugs visuais, segue o vídeo abaixo:
https://github.com/filipedeschamps/tabnews.com.br/assets/73134662/a4c1d2c2-f442-45e5-a4c8-9c3415ba0863
Porém ao editar a publicação aparece erro de sintaxe do Mermaid, sendo que ao criar a publicação não apareceu este erro.
Eu chuto ser um Mermaid ruim pela minha parte (fiz com Chat GPT 🙄) e um caso isolado com bugs na renderização da página.
Agradeço pelo tempo e atenção de vocês!
Caso não haja outros casos, podem fechar a Issue 💪.
Bom, como esse problema não foi reportado novamente e não conseguimos reproduzi-lo para investigar e corrigi-lo, vou fechar o issue. Caso mais alguém se depare com este problema e consiga fornecer mais informações para trabalharmos nisso, podemos reabrir o issue :+1:
Obrigado por ter compartilhado o problema com tantos detalhes! Isso deve facilitar caso mais alguém se depare com esse bug.