Почему Chrome для мобильных устройств не перерисовывает мой фиксированный заголовок?

Question

У меня есть заголовок, который я хотел бы контролировать видимость во время прокрутки. При прокрутке страницы заголовок должен работать, как и любой элемент. При прокрутке страницы, независимо от позиции страницы, я хотел бы показать заголовок, когда страница поднимается. Такое поведение лучше всего понять, наблюдая за simple example.

Я слушаю для событий прокрутки и обновления фиксированного положения DIV с отрицательным верхним значением:

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

Однако поведение в Chrome для мобильных устройств не совсем то, что я бы ожидать. Заголовок часто не оживляет и мгновенно появляется или исчезает, когда границы выполняются. Когда он оживляет, производительность прерывается нерегулярно и часто только рисует от одного до трех кадров. Такое поведение не проявляется при использовании мобильной эмуляции настольных компьютеров Chrome; это происходит только на самом устройстве.

Это, похоже, происходит только при работе с элементом фиксированной позиции в верхней части страницы. Если я попытаюсь изменить фиксированный элемент другим способом, например, перемещать его со стороны или снизу, все работает намного ближе к ожидаемому. Фактически, если я изменю как элемент с фиксированным положением, так и элемент с фиксированным положением, верхний элемент будет вести себя более равномерно, like so.

Почему Chrome for Mobile так неустойчив с фиксированными позициями в верхней части страницы? Есть ли способ объяснить это кратким образом?

Answer 1

Попробуйте использовать некоторые аппаратные ускоренные преобразования CSS3. Вместо того, чтобы использовать top для размещения элемента, попробуйте использовать transform:translateY.

Также добавьте transform:translateZ(0) в элемент заголовка.

Answer 2

Здесь очень много. Мобильные устройства не так сильны, поскольку рабочие столы и анимации иногда могут казаться вялыми. Особенно, когда на странице присутствуют тени CSS.

Я не уверен, что это за причины, но я бы дал шанс window.requestAnimationFrame всякий раз, когда поддерживается (вам нужно проверить поддержку старых браузеров, таких как IE9).

Идея состоит в том, чтобы перерисовывать экран всякий раз, когда мобильный GPU готов к перерисовке (обычно каждые 16,6 мс), а не к потоку с запросом, который не может обрабатывать своевременно.

Так что я хотел бы попробовать что-то вроде этого (не проверено):

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

}); 

Поскольку я не уверен, что если что-нибудь решает, какой-то обратной связи, как только вы попытались было бы неплохо!

• Отредактированный запрос условияAnimationFrame следует называть.