From a5bbf3d832cffb1666e1d581c41a8cfd5bdece64 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 3 May 2018 20:04:34 +0200
Subject: [PATCH] add will-change css property to prepare browser for the
 animations

---
 .../src/less/components/editor/umb-editor.less                | 4 ++++
 .../src/views/components/editor/umb-editor.html               | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/editor/umb-editor.less b/src/Umbraco.Web.UI.Client/src/less/components/editor/umb-editor.less
index 25f8b7e255..646e7e3fb5 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/editor/umb-editor.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/editor/umb-editor.less
@@ -17,6 +17,10 @@
     box-shadow: 0px 0 30px 0 rgba(0,0,0,.3);
 }
 
+.umb-editor--animating {
+    will-change: transform, opacity, width, left;
+}
+
 // hide all infinite editors by default
 // will be shown through animation
 .umb-editors .umb-editor {
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor.html
index af24d20ec0..08f599f36b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor.html
@@ -1,4 +1,4 @@
-<div class="umb-editor" ng-style="model.style" ng-class="{'umb-editor--small': model.size === 'small'}">
+<div class="umb-editor" ng-style="model.style" ng-class="{'umb-editor--small': model.size === 'small', 'umb-editor--animating': model.animating}">
     <div ng-if="!model.view && !model.animating" ng-transclude></div>
     <div ng-if="model.view && !model.animating" ng-include="model.view"></div>
     <div ng-if="model.showOverlay" class="umb-editor__overlay"></div>