SVG主题切换按钮仅iPhone显示异常，求问题原因及排查方向

先看设备显示对比：

Android显示	iPhone显示

问题背景 #

我开发的SVG主题切换按钮在Android设备、PC、笔记本上均显示正常，但在iPhone上却出现异常，目前不清楚排查方向。

可能的问题点及解决尝试 #

1. Safari对SVG遮罩（mask）的兼容性差异 #

Safari处理SVG mask的逻辑和其他浏览器存在区别：

• 当前用黑白填充定义遮罩区域，可尝试将mask内黑色圆形的fill="black"改为fill="transparent"，同时把白色矩形改为fill="black"，反转遮罩逻辑；或者直接用<clipPath>替代<mask>，clipPath在Safari中的兼容性更稳定。
• 确认mask的ID引用无问题，Safari有时会因为作用域问题导致SVG内部资源引用（如url(#moon-mask)）失效，需确保mask和被遮罩元素在同一个SVG标签内。

2. SVG尺寸与缩放适配问题 #

• SVG设置了width="18"、height="18"，但viewBox="0 0 20 20"，尺寸与视口不匹配的情况，在Safari缩放算法下可能导致元素偏移或裁剪。可将width/height调整为与viewBox一致的20，或直接删除width/height属性，通过CSS控制SVG大小。
• 检查Tailwind定位类（如relative top-1 -ml-3）的表现，Safari对CSS相对定位的计算逻辑与其他浏览器不同，可先移除这些定位样式，确认显示正常后再逐步调整位置。

3. CSS样式与颜色继承问题 #

• 当前使用currentColor配合Tailwind文本颜色类，可尝试直接给SVG设置具体fill值（如fill="#f3f4f6"或fill="#374151"），排查是否是currentColor在Safari中未正确继承颜色。
• 检查.sunMoon和.sunRay的CSS样式，若包含动画或过渡效果，先暂时禁用，确认是否是动画属性导致Safari渲染异常。

4. Viewport设置补充 #

虽已添加基础viewport，但iPhone Safari建议补充viewport-fit=cover，避免刘海屏等特殊屏幕的布局影响：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

调试技巧 #

• 用Mac连接iPhone，打开Safari的「开发」菜单，直接在手机上调试SVG的元素结构和样式，实时修改代码观察效果，快速定位问题。
• 简化SVG代码：先保留核心的圆形和遮罩，确认显示正常后，再逐个添加太阳光线元素，定位是哪个部分导致的异常。

内容的提问来源于stack exchange，提问作者Talha Abdur Raheem