fix(scrolling): attempt to fix scrolling performance for blur panels

mohan5070 · Apr 11, 2016 · 3f8d5b4 · 3f8d5b4
1 parent ed7aa47
commit 3f8d5b4
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/src/app/theme/components/baPanel/baPanelBlurHelper.service.js b/src/app/theme/components/baPanel/baPanelBlurHelper.service.js
@@ -11,7 +11,7 @@
   /** @ngInject */
   function baPanelBlurHelper($q) {
     var res = $q.defer();
-    var computedStyle = getComputedStyle(document.body);
+    var computedStyle = getComputedStyle(document.body, ':before');
     var image = new Image();
     image.src = computedStyle.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2');
     image.onerror = function() {

diff --git a/src/sass/theme/conf/_mixins.scss b/src/sass/theme/conf/_mixins.scss
@@ -51,8 +51,19 @@
 
 @mixin main-background() {
   $mainBgUrl: $images-root + 'blur-bg.jpg';
-  background: url($mainBgUrl) no-repeat center center fixed;
-  background-size: cover;
+
+  &::before {
+    content: '';
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: url($mainBgUrl) no-repeat center center;
+    background-size: cover;
+    will-change: transform;
+    z-index: -1;
+  }
 }
 
 @mixin bg-translucent-dark($opacity) {

diff --git a/src/sass/theme/skins/_02_transparent.scss b/src/sass/theme/skins/_02_transparent.scss
@@ -28,6 +28,10 @@ body.badmin-transparent {
     .panel-heading {
       border-bottom: 1px solid rgba(0, 0, 0, 0.12);
       box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
+      transform: translate3d(0,0,0);
+    }
+    .panel-body {
+      transform: translate3d(0,0,0);
     }
   }
   .btn-default {