From: Alexander Ebert <ebert@woltlab.com>
Date: Mon, 16 Jan 2017 14:45:39 +0000 (+0100)
Subject: Use the translateZ hack for Safari only
X-Git-Tag: 3.0.1~35
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=054dd15d066e8462e5c3a84eee2b88d97488995a;p=GitHub%2FWoltLab%2FWCF.git

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
index 0000000000..81d652a81f
--- /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 1aaa2e1f46..f89c6cbc90 100644
--- 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;