移动端Slick滑块右滑超出容器显示灰色background image问题

1. 你之前写的CSS绝大多数没有生效：
   • 类选择器语法错误：同一个元素带多个类名时，每个类名前都要加.，比如你写的.wrapper w-dyn-list div会被浏览器识别为查找.wrapper后代里的<w-dyn-list>自定义标签（这个标签根本不存在），正确写法是.wrapper.w-dyn-list div。
   • 样式规则语法错误：你给.div-block-85写的background-color: transparent; !important;把分号放在了属性值和!important之间，整条规则会被浏览器直接丢弃，完全不会生效。
2. 这个标注“background image”的灰色块是WebKit内核专属渲染问题（iOS端所有浏览器、桌面端Safari都用WebKit内核，桌面Chrome的iPhone预览模式用Blink内核所以不会复现）：slick开启无限滚动时会自动生成克隆幻灯片，滑动到最右侧触发边界回弹、内容超出容器时，WebKit会把克隆节点或上层容器上加载失败的background-image资源占位符渲染出来，这个占位块不属于任何你设置了背景色的容器内容层，所以你单纯改容器背景色完全没用。

按顺序操作即可解决：

1. 替换你之前写的无效CSS，用下面的规则先做基础裁切和资源清理：

/* 滑块相关容器强制裁切溢出内容，统一背景 */
.slider-contain-2,
.slick-list,
.slick-track,
.div-block-85 {
  overflow: hidden !important;
  background: #ffffff !important;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}
/* 强制移除所有克隆幻灯片里的无效背景图 */
.slick-slide.slick-cloned,
.slick-slide.slick-cloned * {
  background-image: none !important;
}

2. 检查slick初始化配置，调整边界相关参数避免过度偏移：

// 替换你原来的slick初始化代码，原有自定义参数保留即可
$('.slider-id').slick({
  // 其他原有配置...
  useCSS: true,
  useTransform: true,
  edgeFriction: 0, // 关闭边界滑动的额外回弹偏移
  waitForAnimate: false
})

3. 如果以上操作后还有残留，去页面编辑器里检查div-block-85元素的背景设置：如果用的是可视化建站工具，删除背景图后有时会残留无效的背景图路径，直接在样式面板把该元素的背景图选项重置为空即可，不要留无效的资源引用。

注意：不要给滑块外层容器手动加overflow-x: auto或overflow-x: scroll属性，保持slick-list默认的overflow: hidden即可，否则WebKit的原生滚动回弹会绕过slick的边界位置计算，直接露出容器外的异常内容。

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