Firefoxのトランスフォームとバックグラウンドの添付が正しく動作しないのを修正しました。

Question

私は、斜めのセクションを持つ全幅の視差のあるタイプのページで作業しています。問題は、Firefoxでの変換です：スキュー（）は、背景アタッチメント：固定プロパティを台無しにするようです。 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'); 
 
      }); 
 
     }); 
 
    }