Merge branch 'rrott/gitlab-ce-logo-issue-11867' into 'master'

Fixes for issue with poor logo transition animation on Safari

See merge request !2690

2 files changed, 19 insertions, 1 deletions

diff --git a/app/assets/javascripts/logo.js.coffee b/app/assets/javascripts/logo.js.coffee
index a5879c8b793..e7d884662ea 100644
--- a/app/assets/javascripts/logo.js.coffee
+++ b/app/assets/javascripts/logo.js.coffee
@@ -42,3 +42,8 @@ work = ->
 
 $(document).on('page:fetch',  start)
 $(document).on('page:change', stop)
+
+$ ->
+  # Make logo clickable
+  $('#logo').on 'click', ->
+    $('#js-shortcuts-home').get(0).click()
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index b7f532c0771..b141928f706 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -45,6 +45,19 @@
     overflow: hidden;
     transition-duration: .3s;
 
+    .home {
+      z-index: 1;
+      position: absolute;
+      left: 0px;
+    }
+
+    #logo {
+      z-index: 2;
+      position: absolute;
+      width: 58px;
+      cursor: pointer;
+    }
+
     a {
       float: left;
       height: $header-height;
@@ -70,7 +83,7 @@
           width: 158px;
           float: left;
           margin: 0;
-          margin-left: 14px;
+          margin-left: 50px;
           font-size: 19px;
           line-height: 41px;
           font-weight: normal;