반복 선형 그라디언트가 사파리에서 균등하게 렌더링되지 않습니다.

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

(포함 크롬.) 나에게 좋은 줄무늬 배경을 제공 기타 모든 브라우저 :

그러나 사파리 (버전 11.0.1)가 그것을 다른 크기의 부드러운 줄무늬했다 :

그래서 접두사를 시도했지만 사파리는 올바른 것을 사용하지 않습니다. 는 지금 물건을 많이하려고했는데

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

(I은 컬러 변화를 시도했다). 그러나 아무것도 작동하지 않습니다.

누구나 아이디어가 있으십니까?

Answer 1

Webkit은 특정도 및 대비가 낮은 그래디언트를 렌더링 할 때 문제가있는 것으로 보입니다. 때때로, 결과는 완전히 예측할 수 없습니다.

이 스 니펫을 전체 화면으로 실행할 때 문제가 악화됩니다.

45deg 각도가 가장 좋습니다.

중량 대비 :

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

낮은 콘트라스트 :

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

는 또한 결과가 더 WH 것을 주목 상기에서 사용 된 em과 같은 반응성 단위를 사용한다. 픽셀을 사용하면 상황이 더욱 어려워집니다. 화소 단위

매우 낮은 콘트라스트 40deg 각도 : 픽셀 단위이지만 큰 사이즈

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

매우 낮은 콘트라스트 40deg 각도 :

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