Prestazioni di scorrimento per gradienti grandi e folli

Quando il vostro designer vi propone un progetto ricco di gradienti, potreste non essere sicuri al 100% di come implementare tutti questi gradienti. Quando si è cercato di trovare il modo migliore per realizzare quelli attualmente presenti su questo sito, è stato necessario un po' di lavoro per fare in modo che a) si vedessero bene su tutte le versioni dei browser (risolvere mask-composite: source-in in Safari pre-16 è stato un bel problema) e b) non causassero problemi di scorrimento del browser se usati in modo abbondante.

Ecco quindi alcune note che ci hanno aiutato a risolvere i problemi di prestazioni dei gradienti:

Usare translate3d per le prestazioni della GPU, ma non per il posizionamento. position: absolute + top,right,bottom,left: whatever is still the most performant way to accomplish this, when combined with translate3d(0,0,0).

L'esportazione ottenuta da Figma è un buon inizio, ma fornisce solo proprietà di base come 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 per ottenere l'effetto finale, come abbiamo fatto noi.

L'altro aspetto da tenere presente è che se si combinano gradienti con molto testo modificato in termini di opacità, la gestione di molte macchine può risultare eccessiva. Quindi la domanda è: quanto è importante il testo con opacità all'80% per il progetto?

Tenendo presente quanto sopra, eviterete la maggior parte dei problemi legati ai gradienti.