仅Chrome出现：子元素定位在父容器外时CSS drop-shadow异常

该问题属于Chrome浏览器的已知渲染Bug，与你的样式配置无关。

触发逻辑 #

Chrome对应用了filter: drop-shadow的元素计算绘制裁剪区域时，未将通过transform属性移至父容器外部的子元素纳入边界统计范围，导致滤镜的渲染区域被错误收窄，最终出现容器底部阴影被截断的异常表现。

可落地修复方案 #

你可以根据实际业务布局需求选择以下任意方案修复：

• 方案1：主动扩大父容器的可绘制范围，给.box添加足够的内边距容纳溢出的子元素，示例调整如下：

.box {
  /* 原有其他样式保持不变 */
  /* 原padding-bottom为32rem，多增加4rem覆盖子元素向上偏移的高度 */
  padding: 2rem 1rem 36rem 1rem;
}

• 方案2：给父容器添加will-change: filter属性，提示浏览器为滤镜效果预留足够的渲染空间：

.box {
  /* 原有其他样式保持不变 */
  will-change: filter;
}

• 方案3：添加透明伪元素撑开父容器的边界计算范围，无需改动原有布局尺寸：

.box::before {
  content: "";
  display: block;
  height: 4rem;
  margin-top: -4rem;
  visibility: hidden;
}

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