iOS Safariの問題 - 絶対位置を固定に変更するとスクロールするときに要素が見えなくなる

Question

ページ上の要素を次のコンテンツのタイトルとして使用したいが、ユーザーがコンテンツにスクロールしているときは、ヘッダーに固定されています。 iOSミュージックアプリのABC字幕に似ています。

こちらをご覧ください：https://jsfiddle.net/1e7ync4w/

HTML

<div> 
    <div class="top"> 
    Test 
    </div> 
    <div class="content"> 
    <div class="scroller"> 

    </div> 

    Test 
    </div> 
</div> 

CSS

.top { 
    background-color: yellow; 

    height: 300px; 
} 

.content { 
    position: relative; 

    height: 600px; 

    background-color: green; 
} 

.scroller { 
    position: absolute; 

    width: 100%; 
    height: 10px; 

    top: 0; 
    left: 0; 

    background-color: blue; 
} 

.scroller.fixed { 
    position: fixed; 
} 

JS

$(document).ready(function() { 
    $(window).on('scroll touchmove', function() { 
     $('.scroller').removeClass('fixed'); 


    var scrollTop = $(window).scrollTop(); 
    var scrollerOffsetTop = $('.scroller').offset().top; 

    if(scrollerOffsetTop <= scrollTop) { 
       $('.scroller').addClass('fixed'); 
    } 
}); 
    }); 

問題は、iOS Safariにスクロール中に要素を変更（JavaScript経由）するバグがあるようです。ユーザーがコンテンツにスクロールすると、タイトル要素は表示されなくなりますが、指をディスプレイから離した後に表示されます（スクロールエンド）。

私はこれをiOS 9.3.2 Safariでのみテストしましたが、この問題は古いと思います。

Answer 1

この問題の解決策が見つかりました。ちょっとハッキリですが、このiOSバグで見つけた唯一の回避策です。

対応する要素を更新するには、ブラウザのGPUを「有効にする」必要があります。これは、ポジションが固定値にジャンプするとすぐにJSを介してtransform: translateスタイルを設定することで実現できます。

例のコードは次のようになります。

$(document).ready(function() { 
    $(window).on('scroll touchmove', function() { 
     $('.scroller').removeClass('fixed'); 


     var scrollTop = $(window).scrollTop(); 
     var scrollerOffsetTop = $('.scroller').offset().top; 

     if (scrollerOffsetTop <= scrollTop) { 
      $('.scroller').addClass('fixed').css({ 
       'transform': 'translate3d(0px,0px,0px)', 
       '-moz-transform': 'translate3d(0px,0px,0px)', 
       '-ms-transform': 'translate3d(0px,0px,0px)', 
       '-o-transform': 'translate3d(0px,0px,0px)', 
       '-webkit-transform': 'translate3d(0px,0px,0px)' 
      }); 
     } 
    }); 
});