3 files changed, 64 insertions, 0 deletions

diff --git a/app/assets/javascripts/issues/show/index.js b/app/assets/javascripts/issues/show/index.js
index 3e6736d14bf..7f5a0e32f72 100644
--- a/app/assets/javascripts/issues/show/index.js
+++ b/app/assets/javascripts/issues/show/index.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import { mapGetters } from 'vuex';
 import errorTrackingStore from '~/error_tracking/store';
 import { parseBoolean } from '~/lib/utils/common_utils';
+import { scrollToTargetOnResize } from '~/lib/utils/resize_observer';
 import IssueApp from './components/app.vue';
 import HeaderActions from './components/header_actions.vue';
 import IncidentTabs from './components/incidents/incident_tabs.vue';
@@ -73,6 +74,10 @@ export function initIssueApp(issueData, store) {
     return undefined;
   }
 
+  if (gon?.features?.fixCommentScroll) {
+    scrollToTargetOnResize();
+  }
+
   bootstrapApollo({ ...issueState, issueType: el.dataset.issueType });
 
   const { canCreateIncident, ...issueProps } = issueData;
diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index 1938b9da3f2..eff00dff7a7 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -181,6 +181,7 @@ export const contentTop = () => {
     },
     () => getOuterHeight('.merge-request-tabs'),
     () => getOuterHeight('.js-diff-files-changed'),
+    () => getOuterHeight('.issue-sticky-header.gl-fixed'),
     ({ desktop }) => {
       const diffsTabIsActive = window.mrTabs?.currentAction === 'diffs';
       let size;
diff --git a/app/assets/javascripts/lib/utils/resize_observer.js b/app/assets/javascripts/lib/utils/resize_observer.js
new file mode 100644
index 00000000000..e72c6fe1679
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/resize_observer.js
@@ -0,0 +1,58 @@
+import { contentTop } from './common_utils';
+
+const interactionEvents = ['mousedown', 'touchstart', 'keydown', 'wheel'];
+
+export function createResizeObserver() {
+  return new ResizeObserver((entries) => {
+    entries.forEach((entry) => {
+      entry.target.dispatchEvent(new CustomEvent(`ResizeUpdate`, { detail: { entry } }));
+    });
+  });
+}
+
+// watches for change in size of a container element (e.g. for lazy-loaded images)
+// and scroll the target element to the top of the content area
+// stop watching after any user input. So if user opens sidebar or manually
+// scrolls the page we don't hijack their scroll position
+export function scrollToTargetOnResize({
+  target = window.location.hash,
+  container = '#content-body',
+} = {}) {
+  if (!target) return null;
+
+  const ro = createResizeObserver();
+  const containerEl = document.querySelector(container);
+  let interactionListenersAdded = false;
+
+  function keepTargetAtTop() {
+    const anchorEl = document.querySelector(target);
+
+    if (!anchorEl) return;
+
+    const anchorTop = anchorEl.getBoundingClientRect().top + window.scrollY;
+    const top = anchorTop - contentTop();
+    document.documentElement.scrollTo({
+      top,
+    });
+
+    if (!interactionListenersAdded) {
+      interactionEvents.forEach((event) =>
+        // eslint-disable-next-line no-use-before-define
+        document.addEventListener(event, removeListeners),
+      );
+      interactionListenersAdded = true;
+    }
+  }
+
+  function removeListeners() {
+    interactionEvents.forEach((event) => document.removeEventListener(event, removeListeners));
+
+    ro.unobserve(containerEl);
+    containerEl.removeEventListener('ResizeUpdate', keepTargetAtTop);
+  }
+
+  containerEl.addEventListener('ResizeUpdate', keepTargetAtTop);
+
+  ro.observe(containerEl);
+  return ro;
+}