From f48263e5a237f316815978d2435da39ab2340d51 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Wed, 25 Oct 2017 20:24:04 +0200
Subject: [PATCH] fixes: U4-10542 Fix SVG backdrop bugs in Firefox (maybe other
 browser too?)

---
 .../application/umbbackdrop.directive.js       | 12 ++++++++----
 .../components/application/umb-backdrop.less   |  6 +++++-
 .../components/application/umb-backdrop.html   | 18 +++++++++---------
 3 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbbackdrop.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbbackdrop.directive.js
index e45074d003..ced59653dd 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbbackdrop.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbbackdrop.directive.js
@@ -24,6 +24,8 @@
 
             function setHighlight () {
 
+                scope.loading = true;
+
                 $timeout(function () {
 
                     // The element to highlight
@@ -48,10 +50,10 @@
                         var rectLeft = el.find(".umb-backdrop__rect--left");
                         
                         // Add the css
-                        rectTop.css({ "height": topDistance, "x": leftDistance });
-                        rectRight.css({ "x": leftAndWidth, "y": topDistance, "height": height });
-                        rectBottom.css({ "height": "100%", "y": topAndHeight, "x": leftDistance });                    
-                        rectLeft.css({ "width": leftDistance });
+                        scope.rectTopCss = { "height": topDistance, "left": leftDistance + "px", opacity: scope.backdropOpacity };
+                        scope.rectRightCss = { "left": leftAndWidth + "px", "top": topDistance + "px", "height": height, opacity: scope.backdropOpacity };
+                        scope.rectBottomCss = { "height": "100%", "top": topAndHeight + "px", "left": leftDistance + "px", opacity: scope.backdropOpacity };
+                        scope.rectLeftCss = { "width": leftDistance, opacity: scope.backdropOpacity };
 
                         // Prevent interaction in the highlighted area
                         if(scope.highlightPreventClick) {
@@ -61,6 +63,8 @@
 
                     }
 
+                    scope.loading = false; 
+
                 });
 
             }
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-backdrop.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-backdrop.less
index 438f82859e..45e73df6da 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-backdrop.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-backdrop.less
@@ -11,13 +11,17 @@
 .umb-backdrop__backdrop {
     height: 100%;
     width: 100%;
-    fill-opacity: 0.4;
 }
 
 .umb-backdrop__rect {
     position: absolute;
     pointer-events: all;
     margin: 0;
+    width: 100%;
+    height: 100%;
+    background: @black;
+    opacity: 0.4;
+    transition: 200ms opacity ease-in-out;
 }
 
 .umb-backdrop__highlight-prevent-click {
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-backdrop.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-backdrop.html
index 14f7aca83e..da1f61ee4a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-backdrop.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-backdrop.html
@@ -1,17 +1,17 @@
 <div class="umb-backdrop" ng-click="clickBackdrop($event)">
 
     <!-- Backdrop with highlight -->
-    <svg ng-if="highlightElement" class="umb-backdrop__backdrop" xmlns="http://www.w3.org/2000/svg" version="1.1" ng-style="{'fill-opacity': backdropOpacity }">
-        <rect class="umb-backdrop__rect umb-backdrop__rect--left" height="100%" />
-        <rect class="umb-backdrop__rect umb-backdrop__rect--top" width="100% "/>
-        <rect class="umb-backdrop__rect umb-backdrop__rect--bottom" width="100%" />
-        <rect class="umb-backdrop__rect umb-backdrop__rect--right" height="100%" width="100%" />
-    </svg>
+    <div ng-if="highlightElement && !loading" class="umb-backdrop__backdrop">
+        <div class="umb-backdrop__rect umb-backdrop__rect--top" ng-style="rectTopCss"></div>
+        <div class="umb-backdrop__rect umb-backdrop__rect--right" ng-style="rectRightCss"></div>
+        <div class="umb-backdrop__rect umb-backdrop__rect--bottom" ng-style="rectBottomCss"></div>        
+        <div class="umb-backdrop__rect umb-backdrop__rect--left" ng-style="rectLeftCss"></div>
+    </div>
 
     <!-- Full screen backdrop -->
-    <svg ng-if="!highlightElement" class="umb-backdrop__backdrop" xmlns="http://www.w3.org/2000/svg" version="1.1" ng-style="{'fill-opacity': backdropOpacity }">
-        <rect  class="umb-backdrop__rect" height="100%" width="100%" />
-    </svg>
+    <div ng-if="!highlightElement || loading" class="umb-backdrop__backdrop">
+        <div  class="umb-backdrop__rect" ng-style="{'opacity': backdropOpacity }"></div>
+    </div>
 
     <!-- Prevent clicks in highlighted area -->
     <div ng-if="highlightPreventClick" class="umb-backdrop__highlight-prevent-click"></div>