Added work-around for dialog subpixel rendering

See #2295

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js
index f03d1ed074c7df61d8c67de3d6692ef7e4667feb..d9eca4e418f2198fe7cc3b4896c5bdba3dfa4d56 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js
@@ -529,6 +529,16 @@ define(
                                        data.content.style.removeProperty('margin-right');
                                }
                        }
+                       
+                       // 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.classList[(needsFix ? 'add' : 'remove')]('jsWebKitFractionalPixel');
+                       }
                },
                
                /**

diff --git a/wcfsetup/install/files/style/ui/dialog.scss b/wcfsetup/install/files/style/ui/dialog.scss
index 7137414849659df6206cf0670b081d0157a0c9c7..d98bedc961e7ec4eee80ed0f90bd556ca4543887 100644 (file)
--- a/wcfsetup/install/files/style/ui/dialog.scss
+++ b/wcfsetup/install/files/style/ui/dialog.scss
@@ -195,6 +195,12 @@
                                }
                        }
                }
+               
+               /* 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;
+               }
        }
 }