From 054dd15d066e8462e5c3a84eee2b88d97488995a Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Mon, 16 Jan 2017 15:45:39 +0100 Subject: [PATCH] Use the translateZ hack for Safari only --- wcfsetup/install/files/style/bootstrap/mixin/hacks.scss | 9 +++++++++ wcfsetup/install/files/style/layout/pageHeader.scss | 9 +++------ 2 files changed, 12 insertions(+), 6 deletions(-) create mode 100644 wcfsetup/install/files/style/bootstrap/mixin/hacks.scss 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; -- 2.20.1