为什么仅苹果设备会出现页面首次加载时logo图片不显示的问题？

问题排查及修复方案 #

可能原因1：路径大小写/图片编码兼容问题 #

Mac/iOS端的Safari浏览器对资源路径大小写校验、图片编码兼容性要求比Chromium内核浏览器严格，首次加载时如果路径大小写不匹配、或者图片使用了Safari不兼容的压缩编码，会出现资源加载失败的情况，刷新后缓存命中就可以正常显示。
修复方案：

• 确认服务器上的图片存储路径和代码中的src="./images/Logo.PNG"完全一致，包括文件名大小写、后缀名大小写
• 重新导出图片为标准非逐行压缩的PNG格式，避免特殊编码导致的兼容问题

可能原因2：图片无显式宽高，布局计算异常 #

你当前仅通过CSS设置logo尺寸，没有给img标签设置原生宽高属性，Safari首次加载时如果CSS解析晚于图片资源加载，会判定图片宽高为0，跳过渲染，刷新后资源和CSS都已缓存，布局计算正常就可以显示。
修复方案：
给img标签添加原始尺寸的宽高属性，同时设置预加载让浏览器优先加载logo资源：

1. 页面head中添加预加载规则

<link rel="preload" href="./images/Logo.PNG" as="image">

2. 修改img标签代码，补充宽高、优化加载属性（宽高替换为你logo的实际原始尺寸即可）

<h1><a class="navbar-brand" href="index.html"><img id="logo" src="./images/Logo.PNG" alt="网站logo" width="120" height="60" loading="eager"/></a></h1>

可能原因3：响应式布局时序冲突 #

移动端媒体查询的规则加载时序差，加上.navbar-brand没有设置宽度，首次加载时#logo的margin: 0 auto无法生效，导致布局偏移被挤出可视区域。
修复方案：
调整CSS规则如下：

#logo{
    width: 20%;
    display: inline-block !important;
    min-width: 80px; /* 可根据实际需求调整最小值 */
    padding-right: 1%;
    padding-left: 0;
}

@media only screen and (max-width:575px) {
    .navbar-brand{
        text-align: center;
        width: 100%; /* 新增规则，让容器占满整行，居中属性正常生效 */
    }
    #logo{
        width: 50%;
        margin: 0 auto;
        position: relative;
        display: block !important; /* 移动端改为块级元素，居中更稳定 */
    } 
}

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