Benjamin Soddy Benjamin Soddy - 1 year ago 59
CSS Question

Why won't Chrome for Mobile redraw my fixed header?

I have a header which I would like to control the visibility of while scrolling. When scrolling down the page, the header should operate as any element would. When scrolling up the page, regardless of page position, I would like to show the header as the page ascends. This behavior can be best understood by observing a simple example.

I am listening for scroll events and updating a fixed position div with a negative top value:

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;
top: headerY - headerHeight,
scrollY = $window.scrollTop();

However, the behavior in Chrome for Mobile is not at all what I would expect. The header often does not animate and will instantly appear or disappear when the bounds are met. When it does animate, the performance is haltingly irregular and often only draws one to three frames. This behavior is not exhibited when using desktop Chrome's mobile emulation; it only occurs on an actual device.

This only seems to happen when dealing with a fixed position element at the top of the page. If I attempt to alter a fixed element in a different manner, such as moving it in from a side or the bottom, everything works much closer to expected. In fact, if I alter both a fixed position top element and fixed position side element, the top element will behave more uniformly, like so.

Why is Chrome for Mobile so erratic with fixed position elements at the top of the page? Is there any way I can account for it in a succinct way?

Answer Source

Try using some hardware accelerated CSS3 transforms. Instead of using top to position your element, try using transform:translateY.

Also try adding transform:translateZ(0) on the header element.