jquery - 溢出 : hidden in FF

Question

我遇到溢出问题:隐藏内容，但仅限于 FF。

我有两个 div(垂直箭头的每一侧，见上文)每个都有 overflow:hidden 应用屏蔽它们各自的子 div。 子元素正在通过 jQuery 在滚动事件中旋转。 无论出于何种原因，每个子元素中的背景图像都没有被其父 div 遮盖。

看到这种不一致； http://www.pearman.com.au/

奇怪的是，在 Firebug 中检查任何父 CSS 属性时，子内容都会出现。

编辑:找到 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>

Answer 1

好吧，经过一段时间的调试，我很确定我找到了问题。

看起来 FireFox 不喜欢显示空容器。我使用的是 13.1，但在通过 FireBug 编辑 HTML 后，最终结果如下:

添加一个简单的

 

彩虹，这应该是一场胜利。

很棒的网站!享受，

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