越来越IE的Safari

最近开发WordPress主题由于使用了新的技术（其实也是几年前就有的功能，只是用得比较少就没注意），因此发现了Safari的一些奇怪BUG。在此记录，避免以后踩坑。

以下BUG在macOS10.15、iOS13均可重现（甚至更老的版本也有此问题）。有且仅有Safari有这样的BUG，Firefox、Chrome、Edge均正常。新时代的IE当之无愧！

2019年，苹果iOS支持了Dark模式，越来越多的App、网站都开始进入了这个大潮流。在网页上实现这个功能最简单的方法是修改Root颜色，通过CSS变量来实现全局颜色更换。然而……

今天想要说的第一个BUG姑且称之为CSS变量引起的吧。它使得Background属性的相对URL无法正确读取。

例：页面HTML引用了一个外部CSS、外部CSS包含以下内容：

:root {
	--bg_default_color: #20a0ff;
}
 
.demo_img_with_variable {
	background: url(imgs/sampleImg.png), var(--bg_default_color);
	width: 338px;
	height: 300px;
}

从上面的代码我们可以看到：定义了一个背景颜色变量。在demo框中，背景图案是逗号分隔符分隔的，因此有两部分组成的：

1. CSS文件地址下的/imgs/sampleImg.png图片
2. 定义的背景颜色

然而，在Safari中，由于上述2定义的背景颜色，会引起1的相对URL图片无法加载。只有将图片改为绝对路径才正常。

众所周知，SVG是矢量图片，无论怎么放大缩小都是清晰的。然而，某些SVG在Safari中将页面放大后显示出来是有马赛克的。之所以我称之为“某些SVG”，是因为大部分SVG都很正常。我自己制作的包含大量渐变的SVG出现了上述问题。具体原因还没有找到。

效果如下所示：

若将上述SVG做成嵌入到HTML中的内联SVG，那么还会出现另一个BUG：当包裹这个SVG的元素通过transform变换（有过度动画）后，SVG本身还会出现更加异常的现象。

例如，通过一个按钮控制SVG包裹元素的Transform变化使得SVG隐藏和显示。隐藏后再次显示时出现了下面的古怪现象：

上述三个BUG示例打包在这里，请观摩：

蓝奏云：https://zsxcool.lanzoux.com/ibzrujc