- Navios
- 20 de agosto de 2026 às 20:02 UTC
- Autor
- Kamo
- Enviar
- c945d88
Todos os 26 elementos do farol listados em "evitar animações não compostas" foram o mesmo erro em quatro lugares: animando uma propriedade de pintura. Medida com Chrome via getAnimations(), que relata exatamente o que a auditoria inspeciona. área de trabalho 29 -> 2 (os 2 restantes são fundosTransições de cores, mobile 1 -> 1 não animações, e não estão na lista da auditoria) Vale a pena notar que o relatório era desktop: em =<767px o site já pára estes, Assim, o móvel mediu 1 antes e depois. hexagon-glow-rotate, x12. «Posição de fundo» animada e «transformação: Virem juntos. Deixar cair a viagem de fundo deixa uma transformação apenas animação; um gradiente que desliza por baixo de um brilho giratório de 8px Algo que qualquer um possa escolher. Gradient-border-travel, x12. Veja abaixo — este revidou. shimmer, x1. Animado `esquerda', uma propriedade de layout, assim que o banner rel moldura. Agora 'transformar'. As percentagens NÃO são intercambiáveis: «esquerda» resolve contra o bloco contendo, `traduzirX' contra o próprio elemento largura, que aqui é de 60% — assim -100% tornou-se -166,667% e 200% tornou-se 333,333%. emblema-pulse, x1. Animado o 'background' taquigrafia. O preenchimento foi movido para um :: depois disso desaparece opacidade entre os mesmos dois alfas. Fica em z-index -1, porque um pseudo-elemento posicionado em 0 tintas sobre o conteúdo em linha e iria ter lavado a palavra que ele senta atrás. Hero-headline-pass, x1. Removido em vez de reimplementado. Um texto clipped varrimento não pode ser composto — está movendo tinta dentro de formas de glifo, e não transformar ou opacidade o expressa. A solução foi tentada antes e medido pior: duplicando a frase em uma sobreposição mascarada levou a contagem UP de 34 a 41 e deixou um segundo raster completo da manchete que funciona para sempre. O preenchimento vertical que percorreu permanece, assim como a entrada de um tiro. A Fronteira Gradiente, e porque: antes era a resposta errada. A reescrita óbvia é colocar o gradiente em `::antes` e traduzi-lo. Ele não renderam nada, e a razão vale a pena manter: estas cartas são `<GradientBorder className="... hexagon-border-glow">`, então um elemento carrega ambas as classes — e `.hexagon-border-glow::antes ` já existe como um Hexágono cortado, turvo brilho hover em `opacidade: 0`. Um elemento tem exatamente um ::antes, então o conjunto de regras fundidas e o gradiente herdaram a invisibilidade, o clip-path e o borrão. O 'overflow: hidden` precisava cortar um 200%-wide varrer também teria cortado o `inset do brilho: -4px' e quebrado o hover. Assim, a varredura obtém seus próprios elementos, que não podem colidir: uma ` track` que clips, e um ` sweep` duas vezes mais largo que traduz -50% contra um gradiente repetindo em seu ponto médio, para que o laço não tem costura. Verificado por captura de tela em 2x contra a produção, não lendo o CSS: o Cabelo azul-violeta está presente e fósforos. Console e Problemas limpos, tudo Os guardas passam.