[scroll-fix] improves scrolling performance outlined in

jsconf#15

 - makes fixed background a ::before pseudo-element and promotes to own layer
 - promotes .nav-fixed to own layer
 - disables pointer-events during scrolling

_includes/head.html

@@ -28,7 +28,7 @@
   <meta itemprop="image" content="http://2015.jsconf.eu{{ image_filename }}">
   <meta name="twitter:image" content="http://2015.jsconf.eu{{ image_filename }}">
   <meta property="og:image" content="http://2015.jsconf.eu{{ image_filename }}"/>
-  
+
   {% if page.twitter %}
   <meta name="twitter:creator" content="@{{ page.twitter | split:'/' | last }}">
   {% else %}

js/app.js

@@ -32,4 +32,18 @@ $(function() {
 	if ($nav.length) {
 		createStickyNav($nav, window.requestAnimationFrame)
 	}
+
+	var body = document.body,
+    timer;
+
+	window.addEventListener('scroll', function() {
+	  clearTimeout(timer);
+	  if(!body.classList.contains('disable-hover')) {
+	    body.classList.add('disable-hover')
+	  }
+
+	  timer = setTimeout(function(){
+	    body.classList.remove('disable-hover')
+	  }, 250);
+	}, false);
 })

sass/imports/_main.scss

@@ -19,8 +19,16 @@ body {
     font-size: 21px;
   }
 
-  &.start {
-    background: $color_blue_dark image-url('jsconf-pattern.svg') 0 0 repeat fixed;
+  &.start::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: $color_blue_dark image-url('jsconf-pattern.svg') 0 0 repeat;
+    z-index: -1;
+    transform: translateZ(0);
   }
 }
 
@@ -59,6 +67,11 @@ nav {
   }
 }
 
+.disable-hover,
+.disable-hover * {
+  pointer-events: none !important;
+}
+
 .btn {
   display: inline-block;
   height: 4em;
@@ -413,6 +426,7 @@ figure {
   top: 0;
   z-index: 10;
   width: 100%;
+  transform: translateZ(0);
   &.js-sticky-nav-blue {
     background-color: $color_blue;
   }