From 3f8d5b4721ac7d9a4507f855247b3291afe6cdc3 Mon Sep 17 00:00:00 2001
From: Vladimir Lugovsky <lugovsky.v@gmail.com>
Date: Sun, 10 Apr 2016 01:53:44 +0300
Subject: [PATCH] fix(scrolling): attempt to fix scrolling performance for blur
 panels

---
 .../baPanel/baPanelBlurHelper.service.js          |  2 +-
 src/sass/theme/conf/_mixins.scss                  | 15 +++++++++++++--
 src/sass/theme/skins/_02_transparent.scss         |  4 ++++
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/app/theme/components/baPanel/baPanelBlurHelper.service.js b/src/app/theme/components/baPanel/baPanelBlurHelper.service.js
index a5399e2..72c89a4 100644
--- 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
index ef3f3ba..bf34aae 100644
--- 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
index caf017b..8cec40a 100644
--- 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 {