繰り返し線形勾配がサファリで均等にレンダリングされない

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