CSS repeating-linear-gradient在Safari 11.01中显示异常？是否为已知问题

嘿，我刚好清楚这个情况——Safari 11.0.1（搭配OS X High Sierra初期版本）确实存在repeating-linear-gradient的渲染bug，属于当时的已知问题。

这类bug的常见表现包括：

• 渐变重复的间距和预期不符
• 出现颜色断层或渐变完全不重复
• 和Chrome等标准浏览器的渲染效果差异明显

解决办法： #

1. 升级Safari版本：苹果在后续的Safari更新（比如11.1及之后的正式版）中修复了这个问题，建议你把Safari升级到最新兼容版本，这是最彻底的解决方案。
2. 临时兼容写法：如果暂时无法升级，可以用普通linear-gradient配合background-size来模拟重复效果。举个例子：
   原本的代码可能是：

   background: repeating-linear-gradient(to right, #fff, #000 10px);
   

   可以替换为：

   background: linear-gradient(to right, #fff, #000 10px, #000 10px, #fff 20px);
   background-size: 20px 100%;
   

   通过手动拼接渐变段并设置背景尺寸来实现重复效果。

当时这个问题在前端社区和WebKit的bug追踪系统里都有不少讨论，属于那个版本Safari的典型兼容性问题之一。

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