重复线性渐变在 Safari 中渲染不均匀

Question

我的 Safari 背景出现问题。

\n\n

\r\n

\r\n

body {\r\n  background-color: #161619;\r\n  /* For browsers that do not support gradients */\r\n  background-image: radial-gradient(rgba(240, 240, 255, .1), rgba(20, 20, 30, .1) 60%), repeating-linear-gradient(40deg, #222, #222, 3px, #252525 3px, #252525 6px);\r\n}

\r\n

\r\n

\r\n

\n\n

所有其他浏览器（包括 Chrome）都给我一个漂亮的条纹背景：\n

\n\n

但 Safari（版本 11.0.1）使其具有不同尺寸的软条纹：\n

\n\n

所以我尝试了前缀 \xe2\x80\x93 但 safari 没有使用正确的前缀。\n（我尝试了颜色变化）

\n\n

\r\n

\r\n

body {\r\n  background-color: #161619;\r\n  /* For browsers that do not support gradients */\r\n  background-image: -webkit-radial-gradient(rgba(240, 240, 255, .1), rgba(20, 20, 30, .1) 60%), -webkit-repeating-linear-gradient(40deg, #222, #222, 3px, #500000 3px, #500000 6px);\r\n  background-image: -o-radial-gradient(rgba(240, 240, 255, .1), rgba(20, 20, 30, .1) 60%), -o-repeating-linear-gradient(40deg, #222, #222, 3px, #252525 3px, #252525 6px);\r\n  background-image: radial-gradient(rgba(240, 240, 255, .1), rgba(20, 20, 30, .1) 60%), repeating-linear-gradient(40deg, #222, #222, 3px, #252525 3px, #252525 6px);\r\n}

\r\n

\r\n

\r\n

\n\n

我现在已经尝试了很多东西。但没有任何效果。

\n\n

有人有什么想法吗？

\n

Answer 1

Webkit 在渲染一定程度的低对比度渐变时似乎存在问题。有时，结果是完全不可预测的。

当这些片段全屏运行时，问题会更加严重。

45deg角度给出最好的结果。

强烈对比：

html {
	height: 100%;
	background: 
		repeating-linear-gradient(
			45deg, 
			#fff, /* heavy contrast */ 
			#fff 0.5em, 
			#252525 0.5em, 
			#252525 1em)
}

降低对比度：

html {
	height: 100%;
	background: 
		repeating-linear-gradient(
			45deg, 
			#111, /* heavy contrast */ 
			#111 0.5em, 
			#252525 0.5em, 
			#252525 1em)
}

我还注意到，使用响应单元（例如上面使用的）时，结果会更好em。有了像素，事情就变得更加不稳定。

与像素单位、40deg角度的对比度非常低：

html {
	height: 100%;
	background: 
		repeating-linear-gradient(
			40deg, 
			#111, 
			#111 3px, 
			#252525 3px, 
			#252525 6px)
}

与像素单位的对比度非常低，但尺寸、40deg角度较大：

html {
	height: 100%;
	background: 
		repeating-linear-gradient(
			30deg, 
			#222, /* heavy contrast */ 
			#222 20px, 
			#252525 20px, 
			#252525 40px)
}