Experimental work around for subpixel rendering issues in Microsoft Edge on Chromium

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js
index f3e57b4582e7c3bd3c4de1cadb4171437d19612c..20eda6e700b8aa6744c5f28cf1a4dfa00e0790ee 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js
@@ -676,11 +676,14 @@ define(
                        // Chrome and Safari use heavy anti-aliasing when the dialog's width
                        // cannot be evenly divided, causing the whole text to become blurry
                        if (Environment.browser() === 'chrome' || Environment.browser() === 'safari') {
-                               // `clientWidth` will report an integer value that isn't rounded properly (e.g. 0.59 -> 0)
-                               var floatWidth = parseFloat(window.getComputedStyle(data.content).width);
-                               var needsFix = (Math.round(floatWidth) % 2) !== 0;
-                               
-                               data.content.parentNode.classList[(needsFix ? 'add' : 'remove')]('jsWebKitFractionalPixel');
+                               // The new Microsoft Edge is detected as "chrome", because effectively we're detecting
+                               // Chromium rather than Chrome specifically. The workaround for fractional pixels does
+                               // not work well in Edge, there seems to be a different logic for fractional positions,
+                               // causing the text to be blurry.
+                               // 
+                               // We can use `backface-visibility: hidden` to prevent the anti aliasing artifacts in
+                               // WebKit/Blink, which will also prevent some weird font rendering issues when resizing.
+                               data.content.parentNode.add('jsWebKitFractionalPixelFix');
                        }
                        
                        var callbackObject = _dialogToObject.get(id);

diff --git a/wcfsetup/install/files/style/ui/dialog.scss b/wcfsetup/install/files/style/ui/dialog.scss
index ac19d5339e3d2fbd836222e4fc8279884352ee82..d6b7345951ff8178a2730f03da36f2480793ec39 100644 (file)
--- a/wcfsetup/install/files/style/ui/dialog.scss
+++ b/wcfsetup/install/files/style/ui/dialog.scss
@@ -203,8 +203,8 @@
                
                /* Chrome and Safari use heavy anti-aliasing when the dialog's width
                   cannot be evenly divided, causing the whole text to become blurry */
-               &.jsWebKitFractionalPixel {
-                       border-left: 1px solid transparent;
+               &.jsWebKitFractionalPixelFix {
+                       backface-visibility: hidden;
                }
        }
 }