Firefox转换和后台附件修复无法正常工作

Question

我正在处理一个带有偏斜部分的全宽，视差类型页面。问题出在Firefox中的变换：skew（）似乎弄乱了后台附件：固定属性。它适用于Chrome，Safari和IE11，但不适用于Firefox。

是否有人知道此问题的解决方法或修复方法？

example of my code

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

Answer 1

对于这方面的简单修复，我没有多少运气，但找到了jQuery解决方法here。

＆＃13;

＆＃13;

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');
            });
        });
    }

＆＃13;

＆＃13;

＆＃13;