Performances de défilement pour les dégradés importants et fous

Lorsque votre designer vous propose un design riche en dégradés, vous n'êtes pas toujours sûr de savoir comment mettre en œuvre tous ces superbes dégradés. Lorsque nous avons travaillé sur la meilleure façon de créer les dégradés que nous avons actuellement sur ce site, il nous a fallu un peu de travail pour a) obtenir un rendu parfait sur toutes les versions de navigateurs (la résolution de mask-composite: source-in dans Safari pré-16 a été un véritable défi) et b) ne pas causer de problèmes de défilement dans le navigateur en cas d'utilisation abondante.

Voici donc quelques remarques qui nous ont aidés à résoudre les problèmes de performance de nos dégradés :

Utilisez translate3d pour les performances du GPU, mais pas pour le positionnement. position: absolute + top,right,bottom,left: whatever is still the most performant way to accomplish this, when combined with translate3d(0,0,0).

L'exportation que vous obtenez de Figma est un bon début, mais elle ne vous donnera que des propriétés de base comme 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 pour réaliser l'effet final, comme nous l'avons fait.

L'autre point à surveiller est que si vous combinez des dégradés avec beaucoup de texte dont l'opacité est modifiée, cela peut finir par être trop lourd à gérer pour de nombreuses machines. La question est donc la suivante : quelle est l'importance de votre texte à 80 % d'opacité pour la conception ?

Gardez à l'esprit ce qui précède et vous éviterez la plupart des problèmes liés aux dégradés.