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

【问题标题】：Elements using mix-blend-mode break when implementing Slick Slider实现 Slick Slider 时使用混合模式中断的元素
【发布时间】：2021-01-05 12:36:53
【问题描述】：

我正在本地构建一个站点（因此我无法在此处显示），其中包含在悬停时应用 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 覆盖的。

【问题讨论】：

标签： css slider slick.js mix-blend-mode

【解决方案1】：

css 3d 转换 break mix 混合模式，幸运的是，没有它，slick 仍然可以正常运行但您需要将其添加到您的 CSS 中

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

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

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

【讨论】：