Safari - 스크롤 애니메이션이 끝날 때까지 고정 된 navbar가 표시됩니다.

Question

position:absolute 헤더가 있습니다. (그래디언트 & transform3d는 멋진 애니메이션을 만들기 위해 - 헤더를 부드럽게 내려 ~ 80px로 만듭니다.) 그리고 ~ 150px 스크롤, 나는 그의 위치를 ​​fixed으로 바꾼다 - 애니메이션하기.

Safari 모바일에서는 애니메이션이 끝나면 Navbar의 50 %만이 페이지 상단에 달라 붙습니다. 다른 50 %는 스크롤 애니메이션을 완전히 멈추었을 때만 나타납니다 & 화면에서 내 손가락을 뗍니다. 하드웨어 가속을 사용하려면 transform: translate3d(0,0,0); 및 -webkit-transform: translateZ(0px);을 적용했지만 그 결과는 그대로 유지됩니다. .navbar는 기본적으로 똑같은 2 개의 div가있는 .row입니다. soo는 문제가 어린이 요소가 아니라고 가정합니다. 내 iPad에서만 발생합니다. 여기

는 일부 코드입니다 :

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 (커피 스크립트)

(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 

누구나 같은 문제가 있었다 또는 해결책을 알아?

Answer 1

헤더에 will-change 속성을 지정하려 했습니까? 어쩌면 사파리가 변경 사항을 (더 잘) 감시합니다. 여러 페이지 및 다른 (모바일) 브라우저에서이 동작을 발견했습니다. 내 일반적인 해결 방법은 항상 시작 부분에 머리글을 고정시켜 브라우저가 모든 항목을 다시 렌더링 할 필요가 없도록하는 것입니다.