iPad Safari 14.0中offset-distance与offset-path样式设置失效问题排查

原因 #

• Safari 14.0及更早版本不支持标准的offset-path和offset-distance属性，必须使用WebKit私有前缀-webkit-offset-path和-webkit-offset-distance。
• 旧版Safari对path()函数的语法兼容性更严格，路径字符串中的多余空格、引号嵌套可能导致解析失败。

修复步骤 #

1. 添加WebKit前缀属性 #

修改你的renderDots方法，同时设置标准属性和带前缀的属性，确保旧版Safari能识别：

private renderDots() {
   const percentage = 100 / (this.sizes.length - 1);
   this.dots.forEach((d, index) => {
     // 同时设置标准属性和WebKit前缀属性
     this.render.setStyle(d.nativeElement,'offset-distance', `${index * percentage}%`);
     this.render.setStyle(d.nativeElement,'-webkit-offset-distance', `${index * percentage}%`);
     
     const pathValue = `path('${this.path}')`;
     this.render.setStyle(d.nativeElement,'offset-path', pathValue);
     this.render.setStyle(d.nativeElement,'-webkit-offset-path', pathValue);
   });
   this.cdr.detectChanges();
}

2. 优化路径字符串格式 #

检查this.path的格式，确保：

• 路径字符串没有多余的空格或换行
• 路径命令（如M、L、C）与数值之间的空格规范
• 如果路径包含特殊字符，确保正确转义

例如，将路径从：

M 10 20 C 30 40, 50 60, 70 80

调整为紧凑格式：

M10 20C30 40,50 60,70 80

3. 备选降级方案（如果前缀仍不生效） #

如果上述方法无效，可以改用SVG原生元素实现圆点定位，避免依赖CSS offset属性：

• 在SVG路径中直接添加<circle>元素，通过getPointAtLength计算路径上的坐标：

private renderDots() {
  const svgPath = document.querySelector('#your-svg-path') as SVGPathElement;
  const totalLength = svgPath.getTotalLength();
  const segmentLength = totalLength / (this.sizes.length - 1);

  this.dots.forEach((d, index) => {
    const point = svgPath.getPointAtLength(index * segmentLength);
    this.render.setStyle(d.nativeElement, 'left', `${point.x}px`);
    this.render.setStyle(d.nativeElement, 'top', `${point.y}px`);
  });
  this.cdr.detectChanges();
}

这种方法兼容性更好，所有支持SVG的浏览器都能正常工作。

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