Safari 14.1使用CSS column-count属性时容器异常延伸问题咨询

这是Safari 14.1及以上版本WebKit内核的已知渲染BUG，并非你的CSS写法错误。问题根源是Safari在媒体查询切换column-count属性值时，没有正确清除之前的容器高度缓存，导致单栏状态下仍然保留了双栏布局时的高度计算值，最终出现容器异常拉长的问题。

方案1：纯CSS修复（优先使用） #

给应用列布局的容器添加强制重计算布局的属性即可解决，不会影响其他浏览器的正常表现：

.columns-md, .columns-off-lg {
  /* 强制Safari重新计算布局，清除高度缓存 */
  contain: layout;
  /* 可选补充：如果contain属性不生效可叠加该属性 */
  overflow: hidden;
}

方案2：JS兜底修复 #

如果CSS方案在部分极端Safari版本下仍有问题，可以添加轻量的resize监听逻辑强制触发重绘：

// 防抖处理，避免频繁触发重绘影响性能
let resizeTimer = null
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer)
  resizeTimer = setTimeout(() => {
    const colEl = document.querySelector('.columns-md.columns-off-lg')
    if (!colEl) return
    // 临时修改属性触发重绘，不影响实际显示效果
    colEl.style.zoom = '1'
    void colEl.offsetWidth
    colEl.style.zoom = 'normal'
  }, 100)
})

你原本的CSS写法逻辑完全正确，该问题仅出现在Safari 14.1~16.x版本，Safari 17+版本官方已经修复了该渲染bug，低版本Safari 13.1及以下也不存在该问题。

内容的提问来源于stack exchange，提问作者Shane D'Silva