Merge branch '18438-ios-scrolling' into 'master'

Resolve "Scrolling horz on iOS for the secondary nav is broken"

## What does this MR do?
Moves absolutely positioned `div`s outside of the scrolling container because mobile safari causes those elements to jump around on scroll.

## Are there points in the code the reviewer needs to double check?
Check on a real iPhone (was only able to check in iOS simulator)

## Why was this MR needed?
Mobile Safari.

## What are the relevant issue numbers?
Closes #18438

## Screenshots (if relevant)
![mobile-safari-fix](/uploads/b38bba735530eb11507fe03036292dd8/mobile-safari-fix.gif)

See merge request !4869

CHANGELOG

@@ -26,6 +26,7 @@ v 8.9.1 (unreleased)
   - Fix GitLab project import issues related to notes and builds. !4855
   - Restrict header logo to 36px so it doesn't overflow. !4861
   - Fix unwanted label unassignment. !4863
+  - Fix mobile Safari bug where horizontal nav arrows would flicker on scroll. !4869
   - Restore old behavior around diff notes to outdated discussions. !4870
   - Fix merge requests project settings help link anchor. !4873
   - Fix 404 when accessing pipelines as guest user on public projects. !4881

app/assets/javascripts/layout_nav.js.coffee

@@ -3,7 +3,7 @@ hideEndFade = ($scrollingTabs) ->
     $this = $(@)
 
     $this
-      .find('.fade-right')
+      .siblings('.fade-right')
       .toggleClass('scrolling', $this.width() < $this.prop('scrollWidth'))
 
 $ ->
@@ -20,5 +20,5 @@ $ ->
     currentPosition = $this.scrollLeft()
     maxPosition = $this.prop('scrollWidth') - $this.outerWidth()
 
-    $this.find('.fade-left').toggleClass('scrolling', currentPosition > 0)
-    $this.find('.fade-right').toggleClass('scrolling', currentPosition < maxPosition - 1)
+    $this.siblings('.fade-left').toggleClass('scrolling', currentPosition > 0)
+    $this.siblings('.fade-right').toggleClass('scrolling', currentPosition < maxPosition - 1)

app/assets/stylesheets/framework/nav.scss

@@ -32,6 +32,7 @@
   overflow-x: auto;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
+
   &::-webkit-scrollbar {
     display: none;
   }
@@ -303,41 +304,9 @@
   }
 
   .nav-links {
-    @include scrolling-links();
     border-bottom: none;
     height: 51px;
 
-    svg {
-      position: relative;
-      top: 2px;
-      margin-right: 2px;
-      height: 15px;
-      width: auto;
-
-      path,
-      polygon {
-        fill: $layout-link-gray;
-      }
-    }
-
-    .fade-right {
-      @include fade(left, rgba(250, 250, 250, 0.4), $background-color);
-      right: 0;
-
-      .fa {
-        right: -7px;
-      }
-    }
-
-    .fade-left {
-      @include fade(right, rgba(250, 250, 250, 0.4), $background-color);
-      left: 0;
-
-      .fa {
-        left: -7px;
-      }
-    }
-
     li {
 
       a {
@@ -373,16 +342,6 @@
       }
     }
   }
-
-  .nav-control {
-
-    .fade-right {
-
-      @media (max-width: $screen-xs-min) {
-        right: 0;
-      }
-    }
-  }
 }
 
 .scrolling-tabs-container {
@@ -390,15 +349,42 @@
 
   .nav-links {
     @include scrolling-links();
+  }
 
   .fade-right {
     @include fade(left, rgba(255, 255, 255, 0.4), $background-color);
-      right: 0;
+    right: -5px;
+
+    .fa {
+      right: -7px;
+    }
   }
 
   .fade-left {
     @include fade(right, rgba(255, 255, 255, 0.4), $background-color);
+    left: -5px;
+
+    .fa {
+      left: -7px;
+    }
+  }
+
+  &.sub-nav-scroll {
+
+    .fade-right {
+      right: 0;
+
+      .fa {
+        right: -23px;
+      }
+    }
+
+    .fade-left {
       left: 0;
+
+      .fa {
+        left: 10px;
+      }
     }
   }
 }
@@ -411,21 +397,19 @@
 
     .fade-right {
       @include fade(left, rgba(255, 255, 255, 0.4), $white-light);
-      right: 0;
+      right: -5px;
+
+      .fa {
+        right: -7px;
+      }
     }
 
     .fade-left {
       @include fade(right, rgba(255, 255, 255, 0.4), $white-light);
-      left: 0;
-    }
+      left: -5px;
 
-    &.event-filter {
-      .fade-right {
-        visibility: hidden;
-
-        @media (max-width: $screen-xs-max) {
-          visibility: visible;
-        }
+      .fa {
+        left: -7px;
       }
     }
   }

app/views/layouts/nav/_admin.html.haml

-%div{ class: nav_control_class }
+.scrolling-tabs-container{ class: nav_control_class }
   = render 'layouts/nav/admin_settings'
-
-  %ul.nav-links.scrolling-tabs
-    %li.fade-left
+  .fade-left
     = icon('arrow-left')
+  .fade-right
+    = icon('arrow-right')
+  %ul.nav-links.scrolling-tabs
     = nav_link(controller: %w(dashboard admin projects users groups builds runners), html_options: {class: 'home'}) do
       = link_to admin_root_path, title: 'Overview', class: 'shortcuts-tree' do
         %span
@@ -37,5 +38,3 @@
         = link_to admin_spam_logs_path, title: "Spam Logs" do
           %span
             Spam Logs
-    %li.fade-right
-      = icon('arrow-right')

app/views/layouts/nav/_group.html.haml

-%div{ class: nav_control_class }
+.scrolling-tabs-container{ class: nav_control_class }
   = render 'layouts/nav/group_settings'
-
-  %ul.nav-links.scrolling-tabs
-    %li.fade-left
+  .fade-left
     = icon('arrow-left')
+  .fade-right
+    = icon('arrow-right')
+  %ul.nav-links.scrolling-tabs
     = nav_link(path: 'groups#show', html_options: {class: 'home'}) do
       = link_to group_path(@group), title: 'Home' do
         %span
@@ -32,5 +33,3 @@
       = link_to group_group_members_path(@group), title: 'Members' do
         %span
           Members
-    %li.fade-right
-      = icon('arrow-right')

app/views/layouts/nav/_profile.html.haml

-%ul.nav-links.scrolling-tabs
-  %li.fade-left
+.scrolling-tabs-container
+  .fade-left
     = icon('arrow-left')
+  .fade-right
+    = icon('arrow-right')
+  %ul.nav-links.scrolling-tabs
     = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do
       = link_to profile_path, title: 'Profile Settings' do
         %span
@@ -44,5 +47,3 @@
       = link_to audit_log_profile_path, title: 'Audit Log' do
         %span
           Audit Log
-  %li.fade-right
-    = icon('arrow-right')

app/views/layouts/nav/_project.html.haml

@@ -24,10 +24,12 @@
                 data: { confirm: leave_confirmation_message(@project) }, method: :delete, title: 'Leave project' do
                 Leave Project
 
-%div{ class: nav_control_class }
-  %ul.nav-links.scrolling-tabs
-    %li.fade-left
+.scrolling-tabs-container{ class: nav_control_class }
+  .fade-left
     = icon('arrow-left')
+  .fade-right
+    = icon('arrow-right')
+  %ul.nav-links.scrolling-tabs
     = nav_link(path: 'projects#show', html_options: {class: 'home'}) do
       = link_to project_path(@project), title: 'Project', class: 'shortcuts-project' do
         %span
@@ -111,5 +113,3 @@
       %li.hidden
         = link_to project_commits_path(@project), title: 'Commits', class: 'shortcuts-commits' do
           Commits
-    %li.fade-right
-      = icon('arrow-right')

app/views/projects/commits/_head.html.haml

-.scrolling-tabs-container
+.scrolling-tabs-container.sub-nav-scroll
+  .fade-left
+    = icon('arrow-left')
+  .fade-right
+    = icon('arrow-right')
   .nav-links.sub-nav.scrolling-tabs
     %ul{ class: (container_class) }
-      %li.fade-left
-        = icon('arrow-left')
       = nav_link(controller: %w(tree blob blame edit_tree new_tree find_file)) do
         = link_to project_files_path(@project) do
           Files
@@ -26,5 +28,3 @@
       = nav_link(controller: [:tags, :releases]) do
         = link_to namespace_project_tags_path(@project.namespace, @project) do
           Tags
-      %li.fade-right
-        = icon('arrow-right')