add css hardware acceleration triggers to some components

Cockpit-HQ · Jun 6, 2023 · eb14808 · eb14808
1 parent 2f4d9f0
commit eb14808
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@
 - Populate only allowed models in content api
 - Fix possible content `models` permission naming collision
 - Fix internal content find/populate api exposing data to users without required rights
+- Fix empty settings screen
 
 ## 2.5.2 (2023-05-18)
 

diff --git a/modules/App/assets/app.bundle.css b/modules/App/assets/app.bundle.css
@@ -2654,6 +2654,8 @@ kiss-dialog {
     opacity: 0;
     pointer-events: none;
     overflow-y: auto;
+    transform: translateZ(0);
+    will-change: opacity;
     z-index: 1000;
 }
 kiss-dialog > kiss-content {
@@ -2672,6 +2674,8 @@ kiss-dialog > kiss-content {
     width: var(--kiss-dialog-width, 350px);
     max-width: calc(100% - 0.01px) !important;
 
+    transform: translateZ(0);
+
     box-sizing: border-box;
 }
 kiss-dialog[size="medium"] > kiss-content {
@@ -2803,6 +2807,8 @@ kiss-offcanvas {
     opacity: 0;
     pointer-events: none;
     z-index: 1000;
+    transform: translateZ(0);
+    will-change: opacity;
     transition: opacity 0.3s ease-in-out;
 }
 kiss-offcanvas > kiss-content {
@@ -2814,19 +2820,19 @@ kiss-offcanvas > kiss-content {
     min-width: 300px;
     overflow-y: auto;
     box-sizing: border-box;
-    transform: translateX(-100%);
+    transform: translateX(-100%) translateZ(0);
     transition: transform 0.3s ease-in-out;
 }
 kiss-offcanvas[flip="true"] > kiss-content {
     right: 0;
-    transform: translateX(100%);
+    transform: translateX(100%) translateZ(0);
 }
 kiss-offcanvas[open] {
     opacity: 1;
     pointer-events: auto;
 }
 kiss-offcanvas[open] > kiss-content {
-    transform: translateX(0);
+    transform: translateX(0) translateZ(0);
 }
 kiss-popout {
     display: flex;
@@ -2842,6 +2848,8 @@ kiss-popout {
     opacity: 0;
     pointer-events: none;
     overflow-y: auto;
+    transform: translateZ(0);
+    will-change: opacity;
     z-index: 10000;
     transition: opacity .3s;
 }

diff --git a/modules/App/assets/vendor/kiss/components/dialog/dialog.css b/modules/App/assets/vendor/kiss/components/dialog/dialog.css
@@ -12,6 +12,8 @@ kiss-dialog {
     opacity: 0;
     pointer-events: none;
     overflow-y: auto;
+    transform: translateZ(0);
+    will-change: opacity;
     z-index: 1000;
 }
 
@@ -31,6 +33,8 @@ kiss-dialog > kiss-content {
     width: var(--kiss-dialog-width, 350px);
     max-width: calc(100% - 0.01px) !important;
 
+    transform: translateZ(0);
+
     box-sizing: border-box;
 }
 

diff --git a/modules/App/assets/vendor/kiss/components/offcanvas/offcanvas.css b/modules/App/assets/vendor/kiss/components/offcanvas/offcanvas.css
@@ -10,6 +10,8 @@ kiss-offcanvas {
     opacity: 0;
     pointer-events: none;
     z-index: 1000;
+    transform: translateZ(0);
+    will-change: opacity;
     transition: opacity 0.3s ease-in-out;
 }
 
@@ -22,13 +24,13 @@ kiss-offcanvas > kiss-content {
     min-width: 300px;
     overflow-y: auto;
     box-sizing: border-box;
-    transform: translateX(-100%);
+    transform: translateX(-100%) translateZ(0);
     transition: transform 0.3s ease-in-out;
 }
 
 kiss-offcanvas[flip="true"] > kiss-content {
     right: 0;
-    transform: translateX(100%);
+    transform: translateX(100%) translateZ(0);
 }
 
 kiss-offcanvas[open] {
@@ -37,5 +39,5 @@ kiss-offcanvas[open] {
 }
 
 kiss-offcanvas[open] > kiss-content {
-    transform: translateX(0);
+    transform: translateX(0) translateZ(0);
 }
diff --git a/modules/App/assets/vendor/kiss/components/popout/popout.css b/modules/App/assets/vendor/kiss/components/popout/popout.css
@@ -12,6 +12,8 @@ kiss-popout {
     opacity: 0;
     pointer-events: none;
     overflow-y: auto;
+    transform: translateZ(0);
+    will-change: opacity;
     z-index: 10000;
     transition: opacity .3s;
 }