Search code examples
jquerycssfixedpackery

Fixed Nav and Header - glitched when scrolling (slow performance)

I am working on a project that uses Packery(Masonry) with draggable modules.

The main container where the modules sit is scrollable, while the header and side nav should stay fixed.

They DO stay fixed however, I get a strange bug where when scrolling through the modules, the fixed elements also scroll then jump back up when the user clicks elsewhere.

It certainly happens most prominently on Chrome.

http://hub.yfish.co.uk/testing/pms(packery)/

This does not work well on a few browsers including FF but works OK on IE11. At a gance of position: fixed performance issue This is my first experience with this issue so go easy on me!

Thanks in advance

Solution

  • The following snippets worked for me:

    -webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;

    See:

    Chrome slow scrolling with fixed position elements