在实现Slick Slider时使用混合混合模式的元素会中断

Question

我正在本地创建一个站点（因此无法在此处显示），该站点的元素在悬停时会应用mix-blend-mode: screen;。它们是我正在使用Slick的幻灯片中的幻灯片中的图像。当我实现Slick来运行幻灯片时，将鼠标悬停在元素上时，混合模式将停止应用。从我昨晚发现的情况来看，这是Slick的常见问题。

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

上面链接中的人似乎也有相同的问题，但是建议的解决方案对我不起作用，因为我没有使用光滑主题，因此也没有使用theme.scss。

似乎transform: inherit !important;可能是解决方案，但是我不确定如何实现它，因为我不了解Slick如何覆盖转换。

Answer 1

css 3d 转换中断混合混合模式，幸运的是 slick 在没有它的情况下仍然可以正常运行 但是你需要把它添加到你的 CSS

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

以及对 js 初始化程序的无转换规则

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