Bootstrap card-columns：Safari浏览器中卡片box-shadow显示异常问题

这是Safari处理CSS多列布局时的常见兼容性bug，我来给你几个亲测有效的解决方案：

原因分析 #

Safari对使用column-count的容器内元素的box-shadow渲染存在缺陷——当卡片被列布局隐性分割（哪怕视觉上没拆分），或者容器渲染上下文未正确触发时，阴影会出现截断、显示不全甚至完全消失的情况。

解决方案 #

1. 禁止卡片被列分割（最推荐） #

给每个.card元素添加break-inside: avoid属性，从根源上避免卡片被多列布局干扰，强制Safari正确渲染阴影：

.card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* 你的自定义阴影样式 */
  break-inside: avoid;
  -webkit-column-break-inside: avoid; /* 兼容旧版Safari */
}

2. 触发硬件加速修复渲染 #

如果第一种方法无效，可以给.card-columns容器添加触发GPU渲染的属性，让Safari重新计算阴影渲染逻辑：

.card-columns {
  transform: translateZ(0);
  /* 也可以替换成 perspective: 1px; 效果类似 */
}

3. 为column-count添加webkit前缀 #

虽然Bootstrap 4已做基础兼容，但自定义媒体查询里明确加上-webkit前缀，能确保Safari正确识别列数设置：

@media (min-width: 576px) {
  .card-columns {
    -webkit-column-count: 1;
    column-count: 1;
  }
}
@media (min-width: 768px) {
  .card-columns {
    -webkit-column-count: 2;
    column-count: 2;
  }
}
@media (min-width: 992px) {
  .card-columns {
    -webkit-column-count: 3;
    column-count: 3;
  }
}
@media (min-width: 1200px) {
  .card-columns {
    -webkit-column-count: 4; /* 填入你需要的列数 */
    column-count: 4;
  }
}

验证建议 #

优先尝试第一种方法，大部分场景下都能解决问题。如果仍有异常，可结合第二种方法一起使用，基本就能搞定Safari的阴影显示问题了。

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