Use the translateZ hack for Safari only

diff --git a/wcfsetup/install/files/style/bootstrap/mixin/hacks.scss b/wcfsetup/install/files/style/bootstrap/mixin/hacks.scss
new file mode 100644 (file)
index 0000000..81d652a
--- /dev/null
+++ b/wcfsetup/install/files/style/bootstrap/mixin/hacks.scss
@@ -0,0 +1,9 @@
+/* See https://github.com/saadeghi/browser-hack-sass-mixins */
+/*--- Only Safari ≥ 9 (Non iOS) ---*/
+@mixin only_safari_no_ios($selector, $map){
+       _:-webkit-full-screen:not(:root:root),#{$selector} {
+               @each $property, $value in ($map) {
+                       #{$property}: $value;
+               }
+       }
+}

diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index 1aaa2e1f46c481487b208d32e2f3cbb63d3714b3..f89c6cbc90963d664729a9fdce1cf3f75fe9a792 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageHeader.scss
+++ b/wcfsetup/install/files/style/layout/pageHeader.scss
@@ -101,9 +101,6 @@
                                height: 50px;
                                padding: 0 15px;
                                
-                               /* fix flicker in Safari on dropdown menu hover */
-                               transform: translateZ(0);
-                               
                                > span {
                                        flex: 0 0 auto;
                                }
@@ -234,6 +231,9 @@
        }
 }
 
+/* Hack for a font rendering issue in Safari on menu hover */
+@include only_safari_no_ios('.pageHeaderPanel > .layoutBoundary', (transform: translateZ(0)));
+
 /* user panel */
 .userPanel {
        flex: 0 0 auto;
@@ -257,9 +257,6 @@
                                padding: 0 15px;
                                position: relative;
                                
-                               /* fix flicker in Safari on dropdown menu hover */
-                               transform: translateZ(0);
-                               
                                /* hide icon label */
                                > span:not(.icon):not(.badge) {
                                        display: none;