--

I fixed it by adding the "transform-gpu" class to each keen-slider__slide element. (This is a Tailwind CSS class that applies a default translate to let the user agent know it's going to transform with CSS.

"Animations can cause layout shifts, but not all of them will be count towards your CLS score. Google ignores CSS transform changes – so if your animation uses transform property, it won’t affect your CLS." Source: https://www.onely.com/blog/cumulative-layout-shift/

The trick with keen-slider is that the "translate3d" CSS property doesn't get added until the JavaScript runs. By starting with a translate3d value, it's no longer considered layout shift -- because the browser knows it's supposed to transform later. Asking for GPU acceleration is just icing on the cake.

--

--

Dr. Derek Austin 🥳
Dr. Derek Austin 🥳

Written by Dr. Derek Austin 🥳

Hi, I'm Doctor Derek! I've been a professional web developer since 2005, and I love writing about programming with JavaScript, TypeScript, React, Next.js & Git.

Responses (2)