求助：Safari无法显示WordPress站点文章图片，其他浏览器正常

• 检查图片请求状态：打开Safari开发者工具（快捷键Cmd + Opt + I），切换到「网络」面板，刷新网格页面，查看图片资源的请求状态：

  • 若显示404/403：确认图片路径是否正确，或者服务器是否对网格页的图片请求做了限制
  • 若显示「已取消」或未发起请求：检查是否有懒加载逻辑阻止了初始加载，或者JS动态插入图片的代码在Safari中执行异常

• 验证懒加载逻辑：

  • 若使用原生loading="lazy"：注意旧版Safari（15.4之前）不支持该属性，若未做兼容处理，可能导致图片无法自动加载；换成基于Intersection Observer的自定义懒加载，确保Safari能触发监听
  • 若使用自定义懒加载：检查代码中是否针对Safari做了错误的浏览器判断，或者Intersection Observer的回调在Safari中未正确执行

• 检查图片格式与兼容性：

  • 若使用WebP格式：确认是否提供了JPG/PNG作为降级格式（通过<picture>标签或srcset配置），Safari 14.1之后才支持WebP，低版本会无法加载
  • 检查图片的object-fit/object-position属性：Safari对部分组合场景的处理有差异，比如容器未设置固定尺寸时，可能导致图片被隐藏

• 排查CSS/JS的显示控制：

  • 检查网格图片容器的CSS：是否有display: none、visibility: hidden或opacity: 0且未触发显示逻辑；对比单页文章的图片容器样式，看是否有差异
  • 查看页面JS：是否有仅在单页触发的图片显示逻辑（比如滚动、点击事件），而网格页未触发对应的初始化代码

• 验证缓存与响应头：

  • 查看图片的响应头Cache-Control：若设置了严格的缓存策略，可能导致网格页首次请求未命中缓存，而单页加载后缓存生效
  • 检查是否有CORS相关报错：Safari的跨域策略更严格，若图片来自第三方域名，需确认服务器配置了正确的CORS响应头

• 测试简化场景：

  • 临时移除网格页的懒加载、自定义JS或复杂CSS，仅保留静态图片标签，看Safari是否能正常显示，逐步排查出问题代码

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