CSS疑似クラスとJQuery視差効果がフリッカーを引き起こします

Question

parallax.js pluginを使用して視差効果を行っています。私は視差効果をしている私のヘッダーdivの一部をオーバーレイするいくつかの黒い三角形をCSSから作りました。私は、ページを下にスクロールすると、CSSの三角形がちらつくことに気付きました。あなたは私のjsfiddleでこれを見ることができます。この問題は、IEとFireFoxで非常に顕著です。

この原因は何か？この問題を解決することは可能ですか？

CSSコード：

body { background-color: #333; } 
#header { background: transparent no-repeat center bottom; position: relative; height: 100%; background-size: cover; overflow: hidden; } 

.big-triangle:after,.big-triangle:before { 
content:''; 
position:absolute; 
bottom:0; 
width:50%; 
z-index:100; 
border-bottom:75px solid black; 
-moz-transform:rotate(0.000001deg); 
-webkit-transform:rotate(0.000001deg); 
-o-transform:rotate(0.000001deg); 
-ms-transform:rotate(0.000001deg); 
transform:rotate(0.000001deg);} 

.big-triangle:before{ 
right:50%; 
border-right:1000px solid transparent; 
border-left:1000px solid;} 

.big-triangle:after{ 
left:50%; 
border-left:1000px solid transparent; 
border-right:1000px solid;} 

Answer 1

私は問題を解決し、純粋なCSSの視差技術を使用して終了。 tutorial is hereへのリンク。