前端杂谈 · Web

越来越IE的Safari

•̀.̫•́✧ · 4月12日 · 2020年 · 本文1065字 · 阅读3分钟158

背景

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

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

越来越IE的Safari

CSS变量

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

效果如下所示:

越来越IE的Safari-歪?是3.1415926吗
在Safari中放大后是左侧模糊的,而其他浏览器是右侧的清晰效果

内联SVG变换模糊

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

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

越来越IE的Safari-歪?是3.1415926吗
本应是左侧的清晰效果

上述三个BUG示例打包在这里,请观摩:

0 条回应