- Verschifft
- 20. August 2026 um 20:02 UTC
- Autor
- Kamo
- Ausschuss
- c945d88
Alle 26 Elemente Lighthouse aufgeführt unter "Vermeidung nicht-composited Animationen" wurden der gleiche Fehler an vier Stellen: Animierung einer Farbe Eigenschaft. Gemessen mit Chrome über getAnimations(), die genau berichtet, was die Prüfung überprüft. Desktop 29 - 2 (die 2 links sind HintergrundColor TRANSITIONS, mobile 1 - 1 nicht Animationen, und sind nicht in der Liste des Audits) Beachtet ist, dass der Bericht auf dem Desktop war: bei =<767px die Seite stoppt diese bereits, so mobil gemessen 1 vor und nach. hexagon-glow-rotate, x12. Animierte "Hintergrund-Position" UND "transformieren: rotieren" zusammen. Dropping der Hintergrund-Reise hinterlässt eine Transformation-only Animation; ein Gradient gleiten unter einem rotierenden, 8px-blurred glühen ist nicht etwas, das jeder herauspicken kann. gradient-border-travel, x12. Siehe unten - dieser hat sich gewehrt. schimmern, x1. Animierte "links", eine Layout-Eigenschaft, so dass das Banner neu aufgelegt jeder Rahmen. Jetzt "transformieren". Die Prozentsätze sind NICHT austauschbar: löst gegen den enthaltenen Block, "translateX" gegen den eigenen Teil Breite, die hier 60% davon ist - so -100% wurde -166,667% und 200% 333,333%. Abzeichen-Puls, x1. Animiert die Kurzschrift "Hintergrund". Die Füllung bewegte sich auf ::after das die Deckkraft zwischen den gleichen zwei Alphas verblasst. Es sitzt bei z-index -1, weil ein positioniertes Pseudo-Element bei 0 malt inline Inhalt und würde haben das Wort ausgewaschen, das es hinter sich sitzt. Held-Headline-Pass, x1. Entfernt statt neu umgesetzt. Ein textgeclippt Swee ist nicht zusammengesetzt werden - es bewegt Farbe in Glyphen-Formen, und keine transform oder Opacity drückt sie aus. Der Workaround wurde vor ausprobiert und Schlimmer gemessen: Vervielfältigung der Satz in einem maskierten Overlay nahm den Grafen UP von 34 bis 41 und hinterließ eine zweite volle Raster der Schlagzeile für immer laufen. Die vertikale Füllung, über die er reiste, bleibt, ebenso wie der Ein-Schuss-Eingang. DER GRADIENT BORDER, UND WARUM ::before WAS THE WRONG ANSWER. Die offensichtliche Neufassung ist, den Gradient auf "::before" zu setzen und zu übersetzen. Es Nichts gemacht, und der Grund ist es wert zu halten: diese Karten sind "<GradientBorder className="... hexagon-border-glow", so dass EIN Element trägt beide Klassen - und ".hexagon-Grenze-Glow::before" existiert bereits als hexagon-clipped, verschwommener Schwebe leuchten bei "opacity: 0". Ein Element hat genau ein ::before, so dass die Regelsätze verschmolzen und der Gradient die Unsichtbarkeit vererbte, der Clip-Pfad und die Unschärfe. Der "Überfluss: versteckt" benötigt, um eine 200%-breite Clip Sweep hätte auch das "Inset: -4px" des Leuchtens beschnitten und den Schwebe gebrochen. So bekommt der Sweep seine eigenen Elemente, die nicht kollidieren können: ein "__track", das Clips und ein "__sweep" doppelt so breit, das -50% gegen einen Gradienten übersetzt Wiederholung in seiner Mitte, so dass die Schleife keine Naht hat. Verifiziert durch Screenshot bei 2x gegen Produktion, nicht durch das Lesen der CSS: die blau-violetten Haaransatz ist vorhanden und passt. Konsole und Ausgaben sauber, alle Wachen passieren.