为何仅当存在overflow-x时drop-shadow才会显示？（Safari特定问题）

现象说明 #

该问题仅出现在Safari Version 15.6 (17613.3.9.1.5)中：当页面存在X轴滚动空间时，元素的drop-shadow正常显示；移除长注释后页面无水平滚动，drop-shadow随之消失，Firefox中渲染表现始终符合预期。

成因 #

1. Safari 15.6渲染引擎bug：该版本的Safari对drop-shadow滤镜的边界计算存在异常。当页面有水平滚动时，浏览器错误地保留了阴影的绘制区域；而当页面无滚动、内容宽度适配视口时，Safari会错误地裁剪掉drop-shadow的渲染范围，导致阴影不显示。
2. 长注释的间接影响：长注释撑开了页面内容宽度，触发了水平滚动，恰好命中了Safari中drop-shadow能正常显示的异常触发条件；移除注释后页面宽度收缩，滚动消失，触发了Safari的阴影裁剪bug。

稳定显示drop-shadow的方法 #

• 强制不裁剪阴影区域：给应用drop-shadow的元素或其父容器添加Tailwind类overflow-visible，明确告诉浏览器不要裁剪元素外部的阴影内容。
• 微调元素尺寸：给目标元素添加极小的内边距（比如px-1），让浏览器计算元素轮廓时包含阴影的空间，避免无滚动时被错误裁剪。
• 替换为box-shadow：如果视觉需求允许，改用box-shadow（对应Tailwind类如shadow-lg），它基于盒子模型渲染，逻辑更稳定，不会受页面滚动状态影响。
• 避免水平滚动：给页面根容器或父容器添加min-w-full overflow-x-hidden，确保页面始终无水平滚动，同时配合overflow-visible保证阴影不被裁剪。

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