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

Question

我在Safari中的背景有问题。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

但Safari（版本11.0.1）制作了不同大小的软条纹：

所以我尝试了前缀 - 但safari并没有使用正确的前缀。 （我试过变色）

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我现在一直在尝试很多东西。但没有任何作用。

任何想法？

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