Overflow : hidden in FF

Question

I'm having a problem with overflow : hidden content, but only in FF.

I have two divs (each side of the vertical arrow, see above) each have overflow:hidden applied masking their respective child div. The child elements are being rotated onscroll event via jQuery. For whatever reason the background image in each of the children elements are not being masked as they should by their parent div.

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

Whats strange is the child content appears when inspecting any of the parents CSS properties in Firebug.

edit : find the CSS / HTML / JQuery

This code is run each time the onscroll is updated (alot);

    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 while of debugging, I am pretty sure I found the issue.

Looks like FireFox does not like to display empty containers. I am on 13.1, but after editing your HTML via FireBug, here is the end result:

Just add a simple

 

to the rainbows and it should be a win.

Great looking 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>