Use CSS variable to apply the dialog offset

diff --git a/ts/WoltLabSuite/Core/Ui/Dialog.ts b/ts/WoltLabSuite/Core/Ui/Dialog.ts
index ee349cd6a66c1c55bf09396f3fabdcab6caeb406..a0ac4c163baa306278441fd1b7d1b68f3f4deb70 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Dialog.ts
+++ b/ts/WoltLabSuite/Core/Ui/Dialog.ts
@@ -414,7 +414,7 @@ const UiDialog = {
             : entry.contentBoxSize;
 
           const offset = Math.floor(contentBoxSize.inlineSize / 2);
-          dialog.style.setProperty("transform", `translateX(-${offset}px)`);
+          dialog.style.setProperty("--translate-x", `-${offset}px`);
         }
       }
     });

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js
index 65c330e1fd59715162849525e63f9c6f338e9644..4e574134c1e6747fc9e646acc9f8f927b6777586 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js
@@ -341,7 +341,7 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Change/Listener", "./S
                             ? entry.contentBoxSize[0]
                             : entry.contentBoxSize;
                         const offset = Math.floor(contentBoxSize.inlineSize / 2);
-                        dialog.style.setProperty("transform", `translateX(-${offset}px)`);
+                        dialog.style.setProperty("--translate-x", `-${offset}px`);
                     }
                 }
             });

diff --git a/wcfsetup/install/files/style/ui/dialog.scss b/wcfsetup/install/files/style/ui/dialog.scss
index 42f0504f68e5d73de37768378355217a0889bebf..648a923ea816ffd3ebcea17f67f476c9815e2af9 100644 (file)
--- a/wcfsetup/install/files/style/ui/dialog.scss
+++ b/wcfsetup/install/files/style/ui/dialog.scss
@@ -53,9 +53,6 @@
                position: fixed;
                right: 0 !important;
                top: 0 !important;
-
-               // Remove the offsets for the dialog position.
-               transform: none !important;
        }
 
        @include screen-sm-up {
@@ -76,6 +73,7 @@
                // this causes a blurry text rendering in Chromium.
                // The offset is calculated using a `ResizeObserver`.
                left: 50%;
+               transform: translateX(var(--translate-x, 0));
 
                &[aria-hidden="false"] {
                        animation: wcfDialog 0.3s;