移动端多浏览器访问时网站Logo无法正常显示的问题求助

iOS平台上的Chrome、Brave等第三方浏览器全部强制搭载系统WebKit渲染内核，三款浏览器出现相同的Logo加载异常，说明问题属于WebKit渲染/资源加载的专属兼容问题，和浏览器本身的选择无关，可从以下几个方向逐一排查：

• 检查CSS显示逻辑的隐藏问题
  代码中同时包含logo-dark和logo-light两个图片元素，这类双Logo设计通常会通过CSS根据系统主题、页面深浅色模式切换显示对应图片，部分站点的切换逻辑会默认将两个图片的display初始值设为none，再通过规则命中显示某一个。如果iOS端WebKit没有正确命中显示规则，就会出现两个图片都被隐藏、Logo完全不显示的情况。
  另外需要注意代码绑定的入场动画逻辑：不少实现fadeInDown类入场动画的方案，会在动画触发前把元素的opacity设为0，等动画触发后再调整为正常不透明。如果iOS端WebKit没有正确触发动画回调，图片哪怕已经加载完成，也会因为透明度过低肉眼看不到。
  验证方式：在iOS端连接电脑开启Safari开发者调试，检查两个Logo图片的计算样式，确认display、visibility、opacity属性没有被设为none、hidden、0的异常值。
• 检查静态资源路径的匹配规则
  桌面端浏览器对静态资源的路径大小写、路径拼接规则容忍度很高，但iOS端WebKit的资源加载是严格遵循匹配规则的：
  比如代码中写的是相对路径images/logo-s2-white.png，如果实际服务器上的文件名大小写和代码书写不一致（比如实际文件名是Logo-S2-white.PNG），桌面端会自动匹配加载，但iOS端WebKit会因为路径严格不匹配返回404；如果当前访问的页面带多层路径层级，相对路径在iOS端会被严格按照当前URL拼接，很容易拼出错误的资源地址，导致加载失败。
  验证方式：把代码中写的图片完整地址直接粘贴到iOS端浏览器的地址栏访问，如果无法正常打开图片，就是路径匹配的问题。
• 检查图片本身的格式解码兼容性
  iOS端WebKit对图片编码的兼容性窄于桌面端浏览器：部分通过设计工具导出的带特殊元数据、特殊颜色通道的PNG，甚至伪装成PNG格式的压缩图片、特殊编码的渐进式图片，桌面端可以正常解码显示，但iOS端WebKit会出现解码失败、不渲染的问题，这类异常和图片本身的尺寸大小没有关系。
  验证方式：用macOS自带的预览工具打开原Logo图片，选择导出为无附加元数据的标准PNG格式，替换线上的原图片资源后重新测试。

*额外注意：当前代码里两个Logo图片的src和srcset书写完全一致，和常规的双Logo设计逻辑不符，建议确认对应的CSS选择器有没有错误绑定到目标图片元素上，避免出现样式错配导致的显示异常。

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