为什么phpMyAdmin 5.2在Safari浏览器下的阴影效果不正常？-phpMyAdmin-PHP中文网

phpmyadmin 5.2 的 box-shadow 在 safari 15.4+ 中失效，是因 transform: translatez(0) 等硬件加速声明触发 webkit 合成层渲染限制；修复需在 css 中用特定媒体查询重置关键容器的 transform 和 will-change，并清除 safari 缓存。

phpmyadmin 5.2 的 box-shadow 在 safari 中失效的直接原因

不是 css 写错了，也不是 safari 版本太旧——而是 phpmyadmin 5.2 默认启用了 transform: translatez(0)（或类似强制硬件加速的 hack），在 safari 15.4+ 中会破坏 box-shadow 渲染，尤其作用于 .navbar、.table_container 或 .card 类容器时，阴影完全不可见或只显示半边。

快速定位是否是 transform 导致的阴影丢失

打开 Safari 开发者工具（Develop → Show Web Inspector），选中一个本该有阴影的元素（比如顶部导航栏），在 Styles 面板里检查是否有以下任一声明：

transform: translateZ(0)
transform: translate3d(0, 0, 0)
will-change: transform

只要其中任意一条存在，且父元素没设 overflow: hidden 或 backface-visibility: hidden，Safari 就大概率丢弃 shadow。这不是 bug，是 WebKit 对合成层阴影渲染的已知限制。

修复方式：改 CSS 而非关硬件加速

别删掉所有 transform——那会影响滚动和动画性能。只需在 common.css 或主题 CSS 文件末尾加这几行：

Comet AI 浏览器

下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。

下载

/* Safari 15.4+ 修复 box-shadow */
@media not all and (min-resolution:.001dpcm) { @media {
  .navbar,
  .table_container,
  .card,
  .modal-content {
    transform: none !important;
    will-change: auto !important;
  }
}}

这段媒体查询精准命中 Safari（绕过 Chrome/Firefox），且只解除关键容器的 transform，不影响其他组件。注意：!important 是必须的，因为 phpMyAdmin 的内联样式或 JS 注入常带高优先级。