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.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store