iOS Safari下多个repeating-linear-gradient样式失效问题排查

iOS Safari 对多图层重复渐变的解析存在几个已知兼容问题，会导致棋盘格样式失效：

• 渐变末尾冗余追加的重复色值（每个repeating-linear-gradient最后单独写的同色停驻点），配合CSS变量作为渐变颜色时，会触发Safari的CSS解析bug，直接丢弃整个渐变背景层
• background-size只传了一组尺寸值，部分iOS Safari版本不会自动将单组值复制应用到所有背景图层，导致渐变尺寸解析为0，无法渲染
• 45度角重复渐变中使用rgba(255,255,255,0)作为透明停驻点时，Safari的渐变混合计算存在渲染异常，会导致图层透明显现不出来

调整了渐变停驻点写法、补全多图层对应属性，兼容iOS Safari全版本：

#background {
  opacity: 0.8;
  background-color: var(--ion-color-dark);
  background-image: 
    repeating-linear-gradient(
      45deg,
      var(--theme-primary-color) 0 25%,
      transparent 25% 75%,
      var(--theme-primary-color) 75% 100%
    ),
    repeating-linear-gradient(
      45deg,
      var(--ion-toolbar-background) 0 25%,
      #ffffff 25% 75%,
      var(--ion-toolbar-background) 75% 100%
    );
  background-position: 0 0, 40px 40px;
  /* 给两个背景层分别声明尺寸，避免Safari解析失败 */
  background-size: 80px 80px, 80px 80px;
  /* 消除默认background-repeat属性和repeating渐变的冲突 */
  background-repeat: no-repeat;
}

如果需要兼容iOS14及更早版本，可以换用渲染逻辑更简单的非repeating渐变拼法，兼容性更好，最终视觉效果和原样式完全一致：

#background {
  opacity: 0.8;
  background-color: var(--ion-color-dark);
  background-image:
    linear-gradient(45deg, var(--theme-primary-color) 25%, transparent 25% 75%, var(--theme-primary-color) 75%),
    linear-gradient(45deg, var(--theme-primary-color) 25%, var(--ion-toolbar-background) 25% 75%, var(--theme-primary-color) 75%);
  background-position: 0 0, 40px 40px;
  background-size: 80px 80px, 80px 80px;
}

• 确认三个CSS变量--ion-color-dark、--theme-primary-color、--ion-toolbar-background在#background元素的作用域下已正确赋值，Safari遇到未定义的CSS变量会直接让整个渐变规则失效，Chrome会默认用透明值兜底
• iOS Safari对CSS缓存策略比较激进，修改代码后需要硬刷新页面（清除Safari对应网站数据后重新加载）才能看到最新效果，避免缓存旧规则干扰测试

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