我正在使用parallax.js plugin进行视差效果。我有一些用CSS创建的黑色三角形覆盖了我正在进行视差效果的标题div的一部分。我注意到当我向下滚动页面时,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;}