iOS Safari中跨SVG元素引用渐变动画失效问题排查

这绝对是iOS Safari的已知渲染Bug，不是你的操作问题！我之前也遇到过几乎一模一样的情况，桌面端Chrome、Firefox都能正常跑，但iOS Safari里跨元素引用的SVG渐变动画就是会卡住，横竖屏切换触发重绘时才会跳一下，之后又立刻冻结。

问题根源 #

iOS Safari的SVG渲染引擎在处理跨元素引用的动画资源时，存在更新机制的缺陷：当动画定义在独立的<defs>或其他SVG元素中，被另一个元素通过url()引用时，浏览器没有持续监听动画的帧更新，导致渲染层停滞在初始帧或者某个随机帧。而横竖屏切换会强制浏览器触发全局重绘重排，这时候动画会同步到当前的进度，但重绘完成后又会回到“无更新”的状态，所以才会出现跳变后再次冻结的现象。

实测有效的临时解决方案 #

给你几个能快速解决问题的思路：

• 内联动画定义：把渐变动画直接写在使用它的元素内部，不要通过跨元素引用的方式调用
• 强制触发重绘：给引用动画的元素加一个无视觉影响的CSS动画，比如定义@keyframes forceRedraw { 0% { opacity: 1; } 100% { opacity: 1; } }，然后给元素应用这个动画，时长和SVG动画保持一致，强制浏览器持续重绘该元素
• 替换为CSS动画：如果场景允许，把SVG渐变动画改成CSS背景渐变动画，iOS Safari对CSS动画的跨元素引用支持要稳定得多

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