Personalizando a tela de abertura do Discourse com imagens SVG personalizadas

Inicialmente, tentei usar SVG animado para a tela de splash. Embora isso funcione no desktop, percebi que, no mobile, animar caminhos complexos ou elementos internos do SVG diretamente resulta em travamentos e até mesmo na paralisação da animação.

Para garantir uma experiência fluida, mudei a lógica da animação para um contêiner HTML padrão (div) envolvendo o SVG. Ao aplicar as animações CSS (transform, scale, opacity) ao wrapper div em vez do SVG, os navegadores mobile podem usar a aceleração por hardware de forma muito mais eficiente, sem travamentos.

5 curtidas