Remove sticky polyfill from dependencies

The sticky polyfill stuck around long enough and we can remove it, as
all browsers we claim to support support `position: sticky`

app/assets/javascripts/diffs/components/compare_versions.vue

 <script>
 import { GlTooltipDirective, GlLink, GlButton, GlSprintf } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { polyfillSticky } from '~/lib/utils/sticky';
 import { __ } from '~/locale';
 import { CENTERED_LIMITED_CONTAINER_CLASSES, EVT_EXPAND_ALL_FILES } from '../constants';
 import eventHub from '../event_hub';
@@ -61,9 +60,6 @@ export default {
   created() {
     this.CENTERED_LIMITED_CONTAINER_CLASSES = CENTERED_LIMITED_CONTAINER_CLASSES;
   },
-  mounted() {
-    polyfillSticky(this.$el);
-  },
   methods: {
     ...mapActions('diffs', ['setInlineDiffViewType', 'setParallelDiffViewType', 'setShowTreeList']),
     expandAllFiles() {

app/assets/javascripts/jobs/components/job_app.vue

@@ -4,7 +4,6 @@ import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import { throttle, isEmpty } from 'lodash';
 import { mapGetters, mapState, mapActions } from 'vuex';
 import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
-import { polyfillSticky } from '~/lib/utils/sticky';
 import { sprintf } from '~/locale';
 import CiHeader from '~/vue_shared/components/header_ci_component.vue';
 import delayedJobMixin from '../mixins/delayed_job_mixin';
@@ -135,14 +134,6 @@ export default {
           this.fetchJobsForStage(defaultStage);
         }
       }
-
-      if (newVal.archived) {
-        this.$nextTick(() => {
-          if (this.$refs.sticky) {
-            polyfillSticky(this.$refs.sticky);
-          }
-        });
-      }
     },
   },
   created() {
@@ -265,7 +256,6 @@ export default {
 
         <div
           v-if="job.archived"
-          ref="sticky"
           class="gl-mt-3 archived-job"
           :class="{ 'sticky-top border-bottom-0': hasTrace }"
           data-testid="archived-job"

app/assets/javascripts/jobs/components/job_log_controllers.vue

@@ -2,7 +2,6 @@
 /* eslint-disable vue/no-v-html */
 import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
-import { polyfillSticky } from '~/lib/utils/sticky';
 import { __, sprintf } from '~/locale';
 import scrollDown from '../svg/scroll_down.svg';
 
@@ -54,9 +53,6 @@ export default {
       });
     },
   },
-  mounted() {
-    polyfillSticky(this.$el);
-  },
   methods: {
     handleScrollToTop() {
       this.$emit('scrollJobLogTop');

app/assets/javascripts/lib/utils/sticky.js

-import StickyFill from 'stickyfilljs';
-
 export const createPlaceholder = () => {
   const placeholder = document.createElement('div');
   placeholder.classList.add('sticky-placeholder');
@@ -60,13 +58,3 @@ export const stickyMonitor = (el, stickyTop, insertPlaceholder = true) => {
     },
   );
 };
-
-/**
- * Polyfill the `position: sticky` behavior.
- *
- * - If the current environment supports `position: sticky`, do nothing.
- * - Can receive an iterable element list (NodeList, jQuery collection, etc.) or single HTMLElement.
- */
-export const polyfillSticky = (el) => {
-  StickyFill.add(el);
-};

app/assets/javascripts/merge_request_tabs.js

@@ -19,7 +19,6 @@ import {
 } from './lib/utils/common_utils';
 import { localTimeAgo } from './lib/utils/datetime_utility';
 import { isInVueNoteablePage } from './lib/utils/dom_utils';
-import { polyfillSticky } from './lib/utils/sticky';
 import { getLocationHash } from './lib/utils/url_utility';
 import { __ } from './locale';
 import Notes from './notes';
@@ -123,7 +122,6 @@ export default class MergeRequestTabs {
     ) {
       this.mergeRequestTabs.querySelector(`a[data-action='${action}']`).click();
     }
-    this.initAffix();
   }
 
   bindEvents() {
@@ -509,21 +507,4 @@ export default class MergeRequestTabs {
       }
     }, 0);
   }
-
-  initAffix() {
-    const $tabs = $('.js-tabs-affix');
-
-    // Screen space on small screens is usually very sparse
-    // So we dont affix the tabs on these
-    if (bp.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;
-
-    polyfillSticky($tabs);
-  }
 }

changelogs/unreleased/leipert-remove-sticky-polyfill.yml

+---
+title: Remove position sticky polyfill
+merge_request: 54299
+author:
+type: changed

package.json

@@ -124,7 +124,6 @@
     "smooshpack": "^0.0.62",
     "sortablejs": "^1.10.2",
     "sql.js": "^0.4.0",
-    "stickyfilljs": "^2.1.0",
     "string-hash": "1.1.3",
     "style-loader": "^1.3.0",
     "swagger-ui-dist": "^3.32.4",

yarn.lock

@@ -11089,11 +11089,6 @@ stealthy-require@^1.1.1:
   resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
   integrity sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=
 
-stickyfilljs@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/stickyfilljs/-/stickyfilljs-2.1.0.tgz#46dabb599d8275d185bdb97db597f86a2e3afa7b"
-  integrity sha512-LkG0BXArL5HbW2O09IAXfnBQfpScgGqJuUDUrI3Ire5YKjRz/EhakIZEJogHwgXeQ4qnTicM9sK9uYfWN11qKg==
-
 stream-browserify@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"