Overflow: hidden in FF

Question

I have an overflow problem: hidden content, but only in FF.

I have two divs (each side of the vertical arrow, see above), each of which has an overflow: a hidden application masks its child div. Elements of a child element are rotated by the scroll event through jQuery. For some reason, the background image in each of the children is not masked, as it should by their parent div.

To see this discrepancy; http://www.pearman.com.au/

It is strange that the child content appears when checking any parent CSS properties in Firebug.

edit: find CSS / HTML / jQuery

This code is executed every time onscroll (alot) is updated;

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 */ } 

and 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> 

Answer 1

Well, after a little debugging, I'm sure I found the problem.

It seems that FireFox does not want to display empty containers. I'm on 13.1, but after editing your HTML via FireBug, here is the end result:

Just add simple

   

to the rainbows, and that should be a victory.

Great site! Enjoy

 <div id="rainbow-mask-right"><div id="ran-one" class="set-origin">&nbsp;</div></div> <div id="rainbow-mask-left"><div id="ran-two" class="set-origin">&nbsp;</div></div>