1

我正在处理带有倾斜部分的全宽视差类型页面。问题在于 Firefox 中的 transform:skew() 似乎弄乱了 background-attachment:fixed 属性。它适用于 Chrome、Safari 和 IE11，但不适用于 Firefox。

有谁知道这个问题的任何解决方法或修复？

我的代码示例

$(function() {
    function resizingScript() {
        var windowWidth = $(window).width();
        var windowHeight = $(window).height();
        var clipSize = 114;

        $('.section-wrap.top').outerHeight( windowHeight+clipSize );
        $('.section-wrap.middle').outerHeight( windowHeight+clipSize*2 );
        $('.section-wrap').css('margin-top', -(clipSize/2));
        $('.section-wrap .section-intro, .section-wrap .section-design').css('padding-bottom', clipSize/2);
        
        var $el = $('.section-wrap');
        $el.each(function (i) {
            $(this).css('z-index', ($el.length - i)+20);
        });
        
    }
    
    resizingScript();
});
#section-container {
    height: 100%;
}

.max-width-container {
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
}

.section-wrap {
    position: relative;
    height: 100%;
    -webkit-transform: skew(0,-5deg);
    -moz-transform: skew(0,-5deg);
    -o-transform: skew(0,-5deg);
    -ms-transform: skew(0,-5deg);
    transform: skew(0,-5deg);
    overflow: hidden;
}

.section-wrap .section-intro,
.section-wrap .section-design {
    -webkit-transform: skew(0,5deg);
    -moz-transform: skew(0,5deg);
    -o-transform: skew(0,5deg);
    -ms-transform: skew(0,5deg);
    transform: skew(0,5deg);
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.content-section {
    width: 100%;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    overflow: hidden;
    padding-top: 100px; 
}

#section-intro .intro-a {
    background-color:red;
}

#section-design .intro-a {
    background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="section-container" class="max-width-container">
        <div class="section-wrap top">
            <div id="section-intro" class="section-intro">
                <div class="intro-a content-section">

                </div>
            </div>
        </div>
        
        <div class="section-wrap middle">
            <div id="section-design" class="section-design">
                <div class="intro-a content-section">

                </div>
            </div>
        </div>
</div>

4

1 回答 1

0

对此的简单修复没有太多运气，但在这里找到了一个 jQuery 解决方法。

if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
        $('.content-section').css('background-attachment', 'scroll');
        $('.section-wrap.middle .content-section').css('background-size', '107%');
        $(window).scroll(function(){
            scrollTop = $(window).scrollTop();
            $('.content-section').each(function(i, el){
                photoTop = $(this).offset().top + clipSize/2;
                console.log(photoTop);
                distance = (photoTop - scrollTop);
                $(this).css('background-position-y', (distance*-1) + 'px');
            });
        });
    }

于 2016-09-29T12:05:33.867 回答