diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js index 93c30c54a8e926f2c7fb552d3775c1aead411d39..a3dff25c93b07eeaade87104f04221a923e694d9 100644 --- a/app/assets/javascripts/merge_request_tabs.js +++ b/app/assets/javascripts/merge_request_tabs.js @@ -358,6 +358,13 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion'; // So we dont affix the tabs on these if (Breakpoints.get().getBreakpointSize() === 'xs' || !$tabs.length) return; + /** + If the browser does not support position sticky, it returns the position as static. + If the browser does support sticky, then we allow the browser to handle it, if not + then we default back to Bootstraps affix + **/ + if ($tabs.css('position') !== 'static') return; + const $diffTabs = $('#diff-notes-app'); $tabs.off('affix.bs.affix affix-top.bs.affix') diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 75c57e369e7f30611d7c0d644d89c5788114e17a..875929269308d965972de965a6e65e234075b6da 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -693,12 +693,17 @@ } .merge-request-tabs-holder { + top: 0; + z-index: 10; background-color: $white-light; + @media(min-width: $screen-sm-min) { + position: sticky; + position: -webkit-sticky; + } + &.affix { - top: 0; left: 0; - z-index: 10; transition: right .15s; @media (max-width: $screen-xs-max) {