实现平滑滑块时使用mix-blend-mode break的元素

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

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

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

​

​

Answer 1

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

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

和对js初始化器的无转换规则。

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