Firefox變換和背景附件固定不起作用

Question

我正在研究一個帶有傾斜部分的全寬視差類型頁面。麻煩在於Firefox的轉換：skew（）似乎搞亂了background-attachment：fixed屬性。它適用於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。

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