Bildlaufleistung für große, verrückte Farbverläufe

Wenn Ihr Designer Ihnen ein Design mit vielen Farbverläufen in den Schoß legt, sind Sie sich vielleicht nicht zu 100 % sicher, wie Sie all diese tollen Farbverläufe implementieren sollen. Bei der Arbeit durch den besten Weg, um die, die wir derzeit auf dieser Website haben, es dauerte ein bisschen zu tun, um sie zu bekommen, um a) sehen gut aus über alle Versionen von Browsern (Sortieren von mask-composite: source-in in pre-16 Safari war ein ziemliches Vergnügen) und b) nicht dazu führen, dass Browser-Scrolling-Probleme, wenn reichlich verwendet.

Hier sind also nur ein paar Hinweise, die uns geholfen haben, unsere Probleme mit der Leistung von Farbverläufen zu lösen:

Verwenden Sie translate3d für den GPU-Leistungsschub, aber nicht für die Positionierung. position: absolute + top,right,bottom,left: whatever is still the most performant way to accomplish this, when combined with translate3d(0,0,0).

Der Export, den Sie von Figma erhalten, ist ein guter Anfang, aber er gibt Ihnen nur grundlegende Eigenschaften wie border-radius, background, mix-blend-mode and filter. It will not be aware of any additional gradients or layer effects from other parts of your design that may impact the design visually. You very well may need use of mask-composite' / '-webkit-mask-composite and mask-image / -webkit-mask-image, um den endgültigen Effekt zu erzielen, wie wir es getan haben.

Außerdem ist zu beachten, dass die Kombination von Farbverläufen und viel Text mit veränderter Deckkraft für viele Maschinen zu viel sein kann. Die Frage ist also: Wie wichtig ist Ihr Text mit 80 % Deckkraft für das Design?

Wenn Sie die oben genannten Punkte beachten, werden Sie die meisten Probleme mit Farbverläufen vermeiden können.