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

Question

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. This is my first experience with this issue so go easy on me!

Thanks in advance

Answer 1

The following snippets worked for me:

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

See:

Chrome slow scrolling with fixed position elements