这个问题是Chrome和Safari的GPU渲染机制导致的——Slick滑块切换时使用translate3d触发硬件加速，浏览器在切换渲染层的过程中，会临时改变页面其他文本元素的字体抗锯齿策略，导致你看到的字体变暗闪烁。Firefox和IE的渲染管线处理这类场景的方式不同，所以没有出现问题。

下面是几个实用的解决方法，按优先级尝试：

1. 强制文本元素保持稳定的字体渲染 #

给底部三栏的红色标题（footer h2）添加以下CSS，让浏览器始终使用一致的字体平滑策略：

footer h2 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  will-change: contents; /* 提前告知浏览器预渲染文本，避免动画时的渲染波动 */
}

如果还是有问题，可以尝试让文本元素也进入GPU渲染层，和滑块处于同一上下文：

footer h2 {
  transform: translateZ(0);
}

2. 禁用Slick的硬件加速动画 #

直接修改Slick的初始化配置，关闭translate3d使用，改用传统的位置动画：

$('.productslider').slick({
  // 保留你原有的配置
  useTransform: false,
  cssEase: 'linear' /* 可根据需要调整动画曲线 */
});

这个方法会牺牲一点动画的极致流畅度，但在现代浏览器中几乎无法感知，却能彻底避免GPU渲染带来的冲突。

3. 隔离滑块的渲染层 #

如果上述方法都无效，尝试给滑块容器添加隔离属性，将滑块的渲染范围限制在自身容器内：

.productslider {
  isolation: isolate;
}

这能防止滑块的GPU渲染操作干扰到页面其他元素的渲染状态。

建议先尝试第一个方案，因为它对页面性能影响最小，且多数情况下能直接解决问题。

内容的提问来源于stack exchange，提问作者Fischbrot