Elements using mix-blend-mode break when implementing Slick Slider

Question

I'm building a site locally (so I can't show it here) that has elements that apply mix-blend-mode: screen; when hovered on. They're images within slides in a slideshow that I'm using Slick for. When I implement Slick to run the slides, the blend mode stops applying when hovering over the elements. From what I found last night, this is a common issue with Slick.

https://community.shopify.com/c/Technical-Q-A/Mix-blend-mode-breaks-after-scolling-Brooklyn-theme/td-p/593470

The person in the above link seems to have the same issue, but the proposed solution didn't work for me because I'm not using the slick theme, and therefore not using theme.scss.

It seems as though transform: inherit !important; might be the solution, but I'm not sure how to implement it as I don't understand how the transform is being overridden by Slick.

Answer 1

css 3d transforms break mix blend mode, fortunately slick still runs ok without it but you need to add this to your CSS

.slick-slider .slick-track,
.slick-slider .slick-list {
    transform: inherit !important;
}

and the no-transform rule to the js initializer

$(".slider").slick({
    useTransform: false
});