オーバーフローに問題があります: 非表示のコンテンツですが、FF のみです。
2 つの div (垂直矢印の両側、上記を参照) があり、それぞれに overflow:hidden が適用され、それぞれの子 div がマスキングされています。子要素は、jQuery を介して onscroll イベントで回転されています。なんらかの理由で、各子要素の背景画像は、親 div によってマスクされる必要があるため、マスクされていません。
この矛盾を確認するには; http://www.pearman.com.au/
奇妙なことに、Firebug で親の CSS プロパティを調べると、子のコンテンツが表示されます。
edit : CSS / HTML / JQuery を見つけます
このコードは、onscroll が更新されるたびに (大量に) 実行されます。
scrollAnimations.push({ 'start': 0, 'end': 450,
'callback': function(scrollTop,scrollDirection){
ran_one.css({
'-ms-transform': 'rotate('+ -(scrollTop)*0.4 +'deg)',
'-webkit-transform': 'rotate('+ -(scrollTop)*0.4 +'deg)',
'-moz-transform': 'rotate('+ -(scrollTop)*0.4 +'deg)',
'-o-transform': 'rotate('+ -(scrollTop)*0.4 +'deg)',
'transform': 'rotate('+ -(scrollTop)*0.4 +'deg)' })
}
});
scrollAnimations.push({ 'start': 0, 'end': 900,
'callback': function(scrollTop,scrollDirection){
ran_two.css({
'-ms-transform': 'rotate('+ -(scrollTop)*0.4 +'deg)',
'-webkit-transform': 'rotate('+ -(scrollTop)*0.4 +'deg)',
'-moz-transform': 'rotate('+ -(scrollTop)*0.4 +'deg)',
'-o-transform': 'rotate('+ -(scrollTop)*0.4 +'deg)',
'transform': 'rotate('+ -(scrollTop)*0.4 +'deg)' })
}
});
CSS;
#rainbow-mask-right{
width:421px;
height:421px;
display:block;
position:absolute;
bottom:0;
left: 50%;
overflow:hidden;
}
#rainbow-mask-left{
width:421px;
height:421px;
display:block;
position:absolute;
bottom:0;
left: 50%;
overflow:hidden;
margin-left: -420px;
visibility:visible;
}
#ran-one{
background:url(images/home/rainbow/ran-dash.gif) no-repeat;
width:421px;
height:421px;
display:block;
top: 421px;
position: absolute;
transform: rotate(50deg);
-ms-transform: rotate(50deg); /* IE 9 */
-webkit-transform: rotate(50deg); /* Safari and Chrome */
-moz-transform: rotate(50deg); /* Firefox */
-o-transform: rotate(50deg); /* Opera */
}
#ran-two{
background:url(images/home/rainbow/ran-colour.gif) no-repeat transparent;
width:421px;
height:421px;
display:block;
top: 421px;
position: absolute;
left: 421px;
}
.set-origin {
transform-origin:0 0;
-ms-transform-origin:0 0; /* IE 9 */
-webkit-transform-origin:0 0; /* Safari and Chrome */
-moz-transform-origin:0 0; /* Firefox */
-o-transform-origin:0 0; /* Opera */
}
とHTML
<div id='rainbow-mask-right'><div id='ran-one' class="set-origin"></div></div>
<div id='rainbow-mask-left'> <div id='ran-two' class="set-origin"></div></div>