From 47aa8f2061b5a538deae218ac27e868a33a42fa4 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Thu, 28 May 2020 12:23:26 +0200 Subject: [PATCH] Experimental work around for subpixel rendering issues in Microsoft Edge on Chromium --- .../install/files/js/WoltLabSuite/Core/Ui/Dialog.js | 13 ++++++++----- wcfsetup/install/files/style/ui/dialog.scss | 4 ++-- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js index f3e57b4582..20eda6e700 100644 --- 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 ac19d5339e..d6b7345951 100644 --- 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; } } } -- 2.20.1