Merge pull request #429 from benknight/master

Rendering performance optimizations, promote-layer mixin
Shopify · Sep 16, 2015 · d75393f · d75393f
2 parents d837f5a + 8a8cc61
commit d75393f
Showing 1 changed file with 11 additions and 0 deletions.
diff --git a/assets/timber.scss.liquid b/assets/timber.scss.liquid
@@ -243,6 +243,14 @@ $socialIconFontStack: 'icons';
   }
 }
 
+/*============================================================================
+  Layer promotion mixin for creating smoother animations with higher FPS.
+==============================================================================*/
+@mixin promote-layer($properties: transform) {
+  -webkit-transform: translateZ(0); // translateZ hack
+  will-change: $properties; // spec
+}
+
 /*============================================================================
   Dependency-free breakpoint mixin
     - Based on http://blog.grayghostvisuals.com/sass/sass-media-query-mixin/
@@ -2046,9 +2054,11 @@ label.error {
 ==============================================================================*/
 .js-drawer-open {
   overflow: hidden;
+  height: 100%;
 }
 
 .drawer {
+  @include promote-layer();
   display: none;
   position: fixed;
   overflow-y: auto;
@@ -2113,6 +2123,7 @@ label.error {
 }
 
 .is-moved-by-drawer {
+  @include promote-layer();
   transition: $drawerTransition;
 
   .js-drawer-open-left & {