Merge pull request #6548 from Panya/scroll-performance

Avoid full-screen repaints on scroll. Fixes #6520

website/docs/source/layouts/layout.erb

@@ -47,6 +47,7 @@
 			</nav>
 
 			<div class="page docs docs-home">
+				<div class="sidebar-background"></div>
 				<div class="container">
 					<div class="row">
 

website/docs/source/stylesheets/_mixins.less

@@ -63,6 +63,15 @@
   padding: @baseline 0;
 }
 
+.fixed-bg {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -5; //keep it in the back
+  will-change: transform;
+}
+
 .inner-bg-large {
   background-image: #c1b4d5; /* Old browsers */
   background-image: url(/images/sidebar_background_inner.png), -moz-linear-gradient(45deg,  #c1b4d5 0%, #98d3f8 100%); /* FF3.6+ */
@@ -74,7 +83,6 @@
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1b4d5', endColorstr='#98d3f8',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
   background-repeat: no-repeat;
   background-position: 0 0;
-  background-attachment:fixed;
 }
 
 .inner-bg-small {
@@ -99,7 +107,6 @@
   background-image: url(/images/sidebar_background_docs.png), linear-gradient(45deg,  #362d6c 0%,#0c5593 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#362d6c', endColorstr='#0c5593',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
   background-repeat: no-repeat;
-  background-attachment:fixed;
 }
 
 

website/docs/source/stylesheets/_pages.less

@@ -2,11 +2,7 @@
 .page { //style all pages
 
     .page-background { //page background color
-        width: 100%;
+        .fixed-bg;
-        height: 100%;
-        top: 0;
-        position: fixed;
-        z-index: -5; //keep it in the back
     } //.background
 
     .page-contents {
@@ -181,7 +177,9 @@
 
     /* inner	 */
     &.inner { //style inner pages
-        .inner-bg-large; //sidebar background
+        .sidebar-background { //sidebar background
+            .inner-bg-large;
+        }
 
         .page-background { //change inner background color!
             background-color: @gray-background; //page background
@@ -205,12 +203,14 @@
 
     /* docs */
     &.docs { //style all docs
-        .docs-bg-large; //sidebar background
-
         .page-background { //change the sidebar background color!
             background: @white; //page background
         }
 
+        .sidebar-background { //sidebar background
+            .docs-bg-large;
+        }
+
         .page-contents {
             padding-top: 30px;
             background-color: @white;

website/docs/source/stylesheets/_sidebar.less

@@ -7,6 +7,10 @@
         margin-bottom: 20px;
     }
 
+    &-background { //background image
+        .fixed-bg;
+    }
+
     .button {
         font-size: 15px;
         color: @dark-blue-text;