Safari - feste Navbar zeigt teilweise Scroll Animation ist über

Question

Ich habe eine gute Platzierung position:absolute Header (mit Farbverlauf & transform3d, um eine nette Animation zu tun - um den Header reibungslos gehen ~ 80px) und wenn ich ~ 150px von zu treffen Scroll, ändere ich seine Position zu fixed - die Animation zu tun.

In Safari Mobile, wenn die Animation beendet ist, werden nur 50% der Navigationsleiste angezeigt, die sich oben auf der Seite befindet. Die anderen 50% werden nur angezeigt, wenn ich die Bildlaufanimation & vollständig abbringe und den Finger vom Bildschirm entferne. Ich habe transform: translate3d(0,0,0); und -webkit-transform: translateZ(0px); angewendet, um Hardwarebeschleunigung zu aktivieren, aber das Ergebnis bleibt gleich. Die .navbar ist eine .row, mit 2 inneren divs, die im Grunde die gleichen sind, also nehme ich an, dass das Problem nicht die Kinderelemente sind. Das passiert nur auf meinem iPad.

Hier einige Code:

CSS

.nav_bar { 
    position: absolute; 
    top: 52px; 
    left: 0; 
    right: 0; 

    transform: translate3d(0,0,0); 
    transition: transform .3s ease; 

    z-index: 2; 

    .&.is-fixed { 
     position: fixed; 
     top: -80px; 

     transform: translate3d(0,100%,0); 
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2); 

     &:before { 
      position: absolute; 
      top: 0; 
      right: 0; 
      bottom: 0; 
      left: 0; 

      background-color:$bright-turquoise; 
      background: linear-gradient(to right, $cobalt 50%, $bright-turquoise 100%); 

      content: ''; 
    } 
} 

JS (Coffeescript)

(window).scroll -> 
    scroll = $(window).scrollTop() 
    windowWidth = $(window).width() 

    if windowWidth >= 1024 
    if scroll >= $('.area_1').height()and 
    scroll < $('.footer').offset().top - 150 
     $navbar.addClass 'is-fixed' 
    else if scroll < $('.area_1').height() || scroll > $('.footer').offset().top - 150 
     setTimeout (-> 
     $navBar.removeClass 'is-fixed' 
     return 
    ), navAnimationTimer 
    return 

jemand das gleiche Problem hatte oder die Lösung weiß?

Answer 1

Haben Sie versucht, dem Header ein will-change Attribut zu geben? Vielleicht passt Safari so auf Veränderungen (besser) auf. Ich habe dieses Verhalten auf mehreren Seiten und sogar anderen (mobilen) Browsern bemerkt. Meine allgemeine Problemumgehung bestand immer darin, den Header am Anfang zu fixieren, damit der Browser nicht alles neu rendern muss.