ChromeとFirefoxの間のCSS3グラデーショングラデーションの問題

Question

background: -moz-linear-gradient(45deg, rgba(92,92,92,0.95) 0%,rgba(92,92,92,0.65) 45%,rgba(0,0,0,0.25) 45%,rgba(0,0,0,0.25) 47%,rgba(0,0,0,0) 47%); 
background: -webkit-linear-gradient(45deg, rgba(92,92,92,0.95) 0%,rgba(92,92,92,0.65) 45%,rgba(0,0,0,0.25) 45%,rgba(0,0,0,0.25) 47%,rgba(0,0,0,0) 47%); 

これらの2行は同じですが、異なる結果が表示されます。ここでは生産中のものを見ることができます（http://www.eprize.com/what-we-do/#mobile）。 Chromeでは、2つの45度の灰色の縦縞が表示されますが、Firefoxでは、2つ目の縦縞ではなく、画像全体にぼやけます。

私はこのために時間を費やしましたが、CSS3ジェネレータの結果しか見つかりませんでしたが、これは私が望むものではありません。 FirefoxをSafariでどのように見えるようにするための助けがあれば& Chrome？

Answer 1

問題は、Firefoxがすべてのカラー停止の開始点と終了点を主張していたことが原因でした。最後と5番目のカラーストップは、グラデーションの残りの部分を透明にすると考えられていましたが、そうではありませんでした。ここに修正があります。

background: -moz-linear-gradient(45deg, rgba(92, 92, 92, 0.95) 0%, rgba(92, 92, 92, 0.65) 45%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0.25) 47%, rgba(0, 0, 0, 0) 47%), rgba(0, 0, 0, 0) 100%);