css - 实现 Slick Slider 时使用 mix-blend-mode 的元素会中断

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 变换打破混合混合模式，幸运的是，没有它，slick 仍然可以正常运行 但你需要将其添加到 CSS 中

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

以及 js 初始化器的不转换规则

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