MC-5423: Scheduled Update slide out issues

- Enable GPU acceleration
- Tidy up animation code

Author: davemacaulay

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_page-builder.less

@@ -34,6 +34,8 @@
     }
 
     &.stage-full-screen {
+        -webkit-transform: translateZ(0);
+        -moz-transform: translateZ(0);
         background: @color-white;
         height: 100%;
         left: 0;
@@ -42,6 +44,7 @@
         padding: 0;
         position: fixed;
         top: 0;
+        transform: translateZ(0);
         width: 100%;
         z-index: 800;
 
@@ -128,14 +131,14 @@
         -moz-transition: .175s ease-in-out;
         -webkit-transition: .175s ease-in-out;
         opacity: 0;
-        transform: scale(.8);
+        transform: scale(.8) translateZ(0);
         transition: .175s ease-in-out;
         visibility: hidden;
     }
 
     &.trigger-transition .pagebuilder-stage-wrapper {
         opacity: 1;
-        transform: scale(1);
+        transform: scale(1) translateZ(0);
         visibility: visible;
     }
 }

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_panel.less

@@ -110,14 +110,14 @@
     }
 
     .pagebuilder-panel {
-        -moz-transition: .4s ease-in-out;
+        -moz-transition: .35s ease-in-out opacity, .35s ease-in-out visibility, .35s ease-in-out height;
         -moz-user-select: none;
         -ms-user-select: none;
         -o-user-select: none;
-        -webkit-transition: .4s ease-in-out;
+        -webkit-transition: .35s ease-in-out opacity, .35s ease-in-out visibility, .35s ease-in-out height;
         -webkit-user-select: none;
         background: @color-very-dark-grayish-orange;
-        transition: .4s ease-in-out;
+        transition: .35s ease-in-out opacity, .35s ease-in-out visibility, .35s ease-in-out height;
         user-select: none;
 
         .search-results-empty {

app/code/Magento/PageBuilder/view/adminhtml/web/js/page-builder.js

@@ -68,11 +68,13 @@ export default class PageBuilder implements PageBuilderInterface {
              * Fix the stage in the exact place it is when it's part of the content and allow it to transition to full
              * screen.
              */
+            const xPosition = parseInt(stageWrapper.offset().top.toString(), 10) -
+                parseInt($(window).scrollTop().toString(), 10);
+            const yPosition = stageWrapper.offset().left;
             this.previousWrapperStyles = {
                 'position': 'fixed',
-                'top': parseInt(stageWrapper.offset().top.toString(), 10) -
-                parseInt($(window).scrollTop().toString(), 10) + 'px',
-                'left': stageWrapper.offset().left + 'px',
+                'top': `${xPosition}px`,
+                'left': `${yPosition}px`,
                 'zIndex': '800',
                 'width': stageWrapper.outerWidth().toString() + 'px'
             };