Angular 16项目SVG导致iOS及Safari页面加载失败求助

根据你描述的现象（仅iOS/Safari系列浏览器出现页面加载阻塞，关联SVG元素，空白SVG也触发问题，侧边栏同Symbol无异常），以下是几个高概率的原因及对应解决思路：

1. CSS类名拼写错误导致布局解析异常 #

你提供的CSS类名是.incramentArrow，但HTML中使用的类是incrementArrow（少了一个e）。Safari的CSS解析对拼写错误的容忍度更低，可能导致SVG元素的Grid布局规则失效，进而触发渲染引擎的阻塞或死循环。

解决方法：修正类名拼写，保持HTML和CSS一致：

.incrementArrow {
    grid-area: 1/1/2/2;
}

2. Safari对SVG <use> 引用与transform属性的兼容性冲突 #

Safari在处理<use>元素的transform-origin和rotate变换时，若结合百分比尺寸（width:33%; height:33%），可能出现尺寸计算异常，引发页面重排死锁。而侧边栏的SVG可能因为布局环境（非Grid、固定尺寸）不同，未触发该问题。

解决方法：

• 给SVG添加固定尺寸（如width:16px; height:16px）替代百分比，避免动态尺寸计算冲突；
• 移除<use>上的transform，改为在父SVG上设置变换，或直接修改symbol的 viewBox 实现箭头方向；
• 同时保留href和xlink:href属性做兼容：

<use
  href="#dropdown_arrow"
  xlink:href="#dropdown_arrow"
  transform-origin="5 5"
  transform="rotate(-90)"
  fill="hsl(var(--gray-100), 1)"
/>

3. 隐藏Symbol容器的方式触发Safari解析Bug #

你通过style="display: none;"隐藏定义symbol的SVG容器，部分Safari版本对display:none的SVG中的symbol解析存在异常，可能导致后续<use>引用时出现资源加载阻塞。

解决方法：替换隐藏方式为不影响symbol解析的样式：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
style="width: 0; height: 0; position: absolute; overflow: hidden;">
  <defs>
    <symbol id="dropdown_arrow" viewBox="0 0 10 10">
        <polygon points="0,10 10,5 0,0 "/>
    </symbol>
  </defs>
</svg>

4. Grid布局与SVG元素的渲染冲突 #

Safari的Grid布局引擎在处理SVG元素时，若SVG作为Grid直接子元素，可能出现布局计算死循环（尤其是空白SVG无尺寸时）。侧边栏的SVG可能不在Grid布局中，因此未触发问题。

解决方法：给SVG套一层容器div，将Grid布局规则应用到容器上：

<div class="incrementArrow">
  <svg viewBox="0 0 10 10" width="33%" height="33%">
    <use href="#dropdown_arrow" ... />
  </svg>
</div>

5. Angular变更检测与SVG渲染的冲突 #

数字输入组件可能存在频繁的变更检测（如双向绑定的数值变化），结合Safari的SVG渲染机制，可能导致渲染线程阻塞。而侧边栏的SVG属于静态展示组件，变更检测频率低，未触发问题。

解决方法：给数字输入组件设置ChangeDetectionStrategy.OnPush，减少不必要的变更检测：

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-number-input',
  templateUrl: './number-input.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class NumberInputComponent {
  // 组件逻辑
}

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