Scrollprestaties voor grote, gekke verlopen

Als je ontwerper je een ontwerp met veel kleurverlopen in de schoot werpt, weet je misschien niet 100% zeker hoe je al die mooie kleurverlopen moet implementeren. Toen we aan het uitzoeken waren hoe we de kleurverlopen die we nu op deze site hebben het beste konden maken, was er nogal wat voor nodig om ervoor te zorgen dat ze a) er geweldig uitzagen in alle versies van browsers (het uitzoeken van mask-composite: source-in in pre-16 Safari was een hele klus) en b) geen problemen veroorzaakten met scrollen in de browser wanneer ze overvloedig werden gebruikt.

Hier zijn een paar opmerkingen die ons hebben geholpen onze prestatieproblemen met kleurverlopen op te lossen:

Gebruik translate3d voor de GPU-prestatiekick, maar niet voor positionering. position: absolute + top,right,bottom,left: whatever is still the most performant way to accomplish this, when combined with translate3d(0,0,0).

De export die je krijgt van Figma is een goed begin, maar het geeft je alleen basiseigenschappen zoals 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 om het uiteindelijke effect te bereiken, zoals wij deden.

Een ander ding om in de gaten te houden is dat als je kleurverlopen combineert met veel tekst die de opaciteit wijzigt, het voor veel machines te veel kan worden om te verwerken. De vraag is hier dus: hoe belangrijk is je 80% ondoorzichtige tekst voor het ontwerp?

Houd het bovenstaande in gedachten en je zult de meeste voetzoekers met kleurverlopen hebben vermeden.