TailwindCSS v3 ring类在Safari与Chrome中的box-shadow渲染差异问题求助

最近我碰到个挺闹心的问题，怀疑是Safari某次更新搞出来的——之前从来没见过这种情况。我给一个模态框加了ring-8 ring-white/30这两个Tailwind类，它们会生成对应的CSS box-shadow效果。在Chrome里，这个阴影的圆角渲染得很正常，但到了Safari里，阴影的圆角居然和模态框本身的圆角完全一致，看起来特别违和。

两张对比图能直观看出区别：

• Chrome下的box-shadow渲染（效果符合预期）
• Safari下的box-shadow渲染（效果很糟糕）

为了把情况说清楚，我把模态框的完整类列表和自定义样式都贴出来。原本模态框自带ring-1 ring-gray-950/5以及深色模式相关类，但我通过自定义样式覆盖了这些设置：

.fi-modal-window {
  @apply sm:ring-8 sm:ring-white/30 !important;
}

这个覆盖是生效的，只是调整了阴影的尺寸和颜色，类的逻辑和原来一致。

完整的代码示例如下：

<script src="https://cdn.tailwindcss.com"></script>
<style type="text/tailwindcss">
body {
  @apply bg-stone-300;
}
.fi-modal-window {
  @apply sm:ring-8 sm:ring-white/30 !important;
}
</style>
<div class=" fi-modal-window relative w-full max-w-xl bg-white dark:bg-gray-900 flex flex-col row-start-2 mx-auto rounded-xl cursor-default pointer-events-auto shadow-xl ring-1 ring-gray-950/5 dark:ring-white/10 ">...</div>

有没有大佬遇到过类似的问题？或者知道怎么修复Safari里这个阴影圆角的渲染bug？

内容来源于stack exchange