iOS Safari Problem - Element wird beim Scrollen beim Ändern der Position absolut unsichtbar

Question

Ich möchte ein Element auf der Seite als Titel des folgenden Inhalts verwenden, aber wenn der Benutzer in den Inhalt scrollt, sollte dieses Titelelement sein in der Kopfzeile behoben. Ähnlich wie die ABC-Untertitel in der iOS Musik-App.

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

Das Problem ist, dass die iOS-Safari einen Fehler beim Ändern der Elemente zu haben scheint (über JavaScript) während des Scrollens. Sobald der Benutzer in den Inhalt scrollt, wird das Titelelement unsichtbar, aber nach dem Loslassen des Fingers von der Anzeige (Scroll-Ende) angezeigt.

Ich habe dies nur auf der Safari iOS 9.3.2 getestet, aber ich denke, dieses Problem ist älter.

Answer 1

Ich habe eine Lösung für dieses Problem gefunden. Es ist ein bisschen hacky, aber die einzige Problemumgehung, die ich für diesen iOS-Bug gefunden habe.

Die GPU des Browsers muss für die Aktualisierung des entsprechenden Elements "aktiviert" werden. Dies kann erreicht werden, indem ein transform: translate-Style über JS eingestellt wird, sobald die Positionierung auf "fixed" gesprungen ist.

Der Code des Beispiels würde wie folgt aussehen:

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