- Spegnimento
- 20 agosto 2026 alle ore 20:02 UTC
- Autore
- Kamo
- Impegno
- c945d88
Tutti i 26 elementi Lighthouse elencati sotto "evitare animazioni non composte" erano lo stesso errore in quattro posti: l'animazione di una proprietà di vernice. Misurato con Chrome via getAnimations(), che riporta esattamente ciò che l'audit ispezioni. desktop 29 -> 2 (le 2 sinistra sono sfondoColor TRANSIZIONI, mobile 1 -> 1 non animazioni, e non sono nell'elenco dell'audit) Vale la pena notare che il rapporto era desktop: a = <767px il sito già ferma questi, così mobile misurato 1 prima e dopo. esagono-glow-rotate, x12. Animato `sfondo-posizione` E `trasformare: ruotare insieme. Gocciare il viaggio di sfondo lascia un solo trasformato animazione; un gradiente scorrevole sotto una rotazione, 8px-blurred bagliore non è qualcosa che chiunque può scegliere. gradient-border-travel, x12. Vedi di seguito — questo ha combattuto indietro. shimmer, x1. Animato `left`, una proprietà di layout, in modo che il banner relaid ogni telaio. Ora `transform`. Le percentuali NON sono intercambiabili: `left` si risolve contro il blocco contenente, `translateX` contro il proprio elemento larghezza, che qui è il 60% di esso — così -100% è diventato -166,667% e il 200% è diventato 333.333%. Tappetino, x1. Animato il `background` shorthand. Il riempimento si è spostato in un ::dopo che questo svanisce l'opacità tra le stesse due alfa. Si trova a z-index -1, perché uno pseudo-element posizionato a 0 vernici OVER contenuto inline e sarebbe hanno tolto la parola che siede dietro. eroe-headline-pass, x1. Rimossa piuttosto che reimplementata. Un testo rovesciato spazzare non può essere composito — sta muovendo la vernice dentro le forme di glifo, e non trasformare o opacità lo esprime. Il lavoro è stato provato prima e misurato peggio: duplicare la frase in un overlay mascherato ha preso il conteggio UP da 34 a 41 e ha lasciato un secondo raster completo della titolo in esecuzione per sempre. Il riempimento verticale ha viaggiato sopra resti, così come l'ingresso di un colpo. IL BORDER GRADIENTE, E PERCHE': Prima era l'Assistenza WRONG. L'ovvio riscrittura è quello di mettere il gradiente su `:: prima ` e tradurlo. Si'. non ha reso nulla, e la ragione vale la pena mantenere: queste carte sono < <GradientBorder className="... hexagon-border-glow"> `, quindi un elemento porta entrambe le classi — e `.hexagon-border-glow:: prima ` già esiste come un hexagon-clipped, blurred hover glow a `opacity: 0`. Un elemento ha esattamente uno :: prima, così la regola si fuse e il gradiente ereditava l'invisibilità, il sentiero clip e il blur. Il `overflow: nascosto ` necessario per clip un 200% spazzare avrebbe anche ritagliato il `inset di quel bagliore: -4px` e rotto il hover. Così la spazzata ottiene i propri elementi, che non possono collidere: un ` track` che clip, e un ` sweep` due volte più largo che traduce -50% contro un gradiente ripetendo al suo punto centrale, quindi il loop non ha cuciture. Verificato da screenshot a 2x contro la produzione, non leggendo il CSS: il la linea di capelli blu-violetti è presente e corrisponde. Console e problemi puliti, tutti passano le guardie.