Chrome for Mobile이 고정 헤더를 다시 그리지 않는 이유는 무엇입니까?

Question

스크롤하는 동안의 가시성을 제어하고 싶은 헤더가 있습니다. 페이지를 아래로 스크롤 할 때 머리글은 모든 요소처럼 작동해야합니다. 페이지를 스크롤 할 때 페이지 위치에 관계없이 페이지가 올라갈 때 헤더를 표시하고 싶습니다. 이 문제는 simple example을 관찰하면 가장 잘 이해할 수 있습니다.

나는 스크롤 이벤트를 수신하고 음의 최고 값으로 고정 된 위치에 사업부를 업데이트하고 있습니다 :

$(function() 
{ 
    var $header = $("#header"); 
    var $window = $(window); 

    var headerHeight = $header.outerHeight(); 
    var headerY = $header.outerHeight(); 
    var scrollY = $window.scrollTop(); 

    $window.on("scroll", function() 
    { 
     headerY += scrollY - $window.scrollTop(); 
     if (headerY > headerHeight) 
     { 
      headerY = headerHeight; 
     } 
     else if (headerY < 0) 
     { 
      headerY = 0; 
     } 
     $header.css(
      { 
       top: headerY - headerHeight, 
      }); 
     scrollY = $window.scrollTop(); 
    }); 
}); 

그러나, 모바일 크롬에서 동작이 전혀 내가 기대하는 것이 아니다. 헤더는 종종 움직이지 않으며 경계가 만났을 때 즉시 나타나거나 사라집니다. 그것이 움직일 때, 성능은 불규칙하게 불규칙하며 종종 1 ~ 3 프레임 만 그립니다. 데스크톱 Chrome의 모바일 에뮬레이션을 사용할 때이 동작이 나타나지 않습니다. 실제 장치에서만 발생합니다.

이것은 페이지 상단의 고정 된 위치 요소를 다룰 때만 발생하는 것으로 보입니다. 고정 된 요소를 측면이나 바닥에서 이동하는 등 다른 방식으로 변경하려고하면 모든 것이 예상보다 훨씬 가깝습니다. 사실 고정 위치 상단 요소와 고정 위치 측면 요소를 모두 변경하면 상단 요소가 더 균일하게 동작합니다 (like so).

페이지 상단의 고정 위치 요소로 인해 Chrome 모바일이 너무 왜곡되어있는 이유는 무엇입니까? 간결한 방법으로 설명 할 수있는 방법이 있습니까?

Answer 1

일부 하드웨어 가속 CSS3 변환을 사용해보십시오. top을 사용하여 요소를 배치하는 대신 transform:translateY을 사용해보세요.

transform:translateZ(0)을 헤더 요소에 추가해보십시오.

Answer 2

여기에 많은 것들이 있습니다. 데스크톱과 애니메이션이 때로는 느린 것처럼 보이기 때문에 모바일 장치는 그다지 강력하지 않습니다. 특히 페이지에 CSS 그림자가있을 때.

이 문제의 원인은 확실하지 않지만 IE9와 같은 구형 브라우저에 대한 지원이 필요하면 언제든지 window.requestAnimationFrame 기능을 지원할 것입니다.

아이디어는 모바일 GPU가 다시 그리기 (일반적으로 16.6ms마다) 할 준비가 될 때마다 화면을 다시 그리며 적시에 처리 할 수없는 요청으로 넘치지 않도록하는 것입니다.

그래서 나는이 같은 (테스트하지)를 시도 할 것입니다 : 당신이 노력하면

$(function() 
{ 
    var $header = $("#header"); 
    var $window = $(window); 

    var headerHeight = $header.outerHeight(); 
    var headerY = $header.outerHeight(); 
    var scrollY = $window.scrollTop(); 
    var requestId; 

    $window.on("scroll", function() 
    { 
     //run only when no request is pending. 
     if (requestId === undefined) { 
      requestId = window.requestAnimationFrame(animateHeader); 
     } 
    }); 

    function animateHeader() { 
     requestId = undefined; 

     headerY += scrollY - $window.scrollTop(); 
     if (headerY > headerHeight) 
     { 
      headerY = headerHeight; 
     } 
     else if (headerY < 0) 
     { 
      headerY = 0; 
     } 
     $header.css(
      { 
       top: headerY - headerHeight, 
      }); 
     scrollY = $window.scrollTop(); 
    } 

}); 

내가 그 아무것도 해결되는지 확실하지 않다 때문에, 약간의 피드백은 좋은 것입니다!

• 편집 조건 requestAnimationFrame을 호출해야합니다.