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

Question

我在 Safari 中的背景存在问题。

body {
  background-color: #161619;
  /* For browsers that do not support gradients */
  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);
}

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

但 Safari（版本 11.0.1）将其做成不同大小的软条纹：

所以我尝试了前缀——但 safari 没有使用正确的前缀。 （我尝试了换色）

body {
  background-color: #161619;
  /* For browsers that do not support gradients */
  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);
  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);
  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);
}

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

有人有什么想法吗？

Answer 1

Webkit 在呈现一定程度的渐变和低对比度时似乎存在问题。有时，结果完全无法预测。

当这些 sn-ps 全屏运行时，问题会更加严重。

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)
}