[PM-5189] Fixing issue within Safari relating to repositioning elements from outer frame

apps/browser/src/autofill/services/autofill-overlay-content.service.ts

@@ -3,7 +3,11 @@ import "lit/polyfill-support.js";
 import { FocusableElement, tabbable } from "tabbable";
 
 import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
-import { EVENTS, AutofillOverlayVisibility } from "@bitwarden/common/autofill/constants";
+import {
+  EVENTS,
+  AutofillOverlayVisibility,
+  AUTOFILL_OVERLAY_HANDLE_REPOSITION,
+} from "@bitwarden/common/autofill/constants";
 
 import {
   FocusedFieldData,
@@ -18,7 +22,12 @@ import {
 import AutofillField from "../models/autofill-field";
 import AutofillPageDetails from "../models/autofill-page-details";
 import { ElementWithOpId, FillableFormFieldElement, FormFieldElement } from "../types";
-import { elementIsFillableFormField, getAttributeBoolean, sendExtensionMessage } from "../utils";
+import {
+  elementIsFillableFormField,
+  getAttributeBoolean,
+  sendExtensionMessage,
+  throttle,
+} from "../utils";
 
 import {
   AutofillOverlayContentExtensionMessageHandlers,
@@ -1048,10 +1057,15 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
    * the overlay elements on scroll or resize.
    */
   private setOverlayRepositionEventListeners() {
-    globalThis.addEventListener(EVENTS.SCROLL, this.handleOverlayRepositionEvent, {
+    const handler = this.useEventHandlersMemo(
+      throttle(this.handleOverlayRepositionEvent, 800),
+      AUTOFILL_OVERLAY_HANDLE_REPOSITION,
+    );
+    globalThis.addEventListener(EVENTS.SCROLL, handler, {
       capture: true,
+      passive: true,
     });
-    globalThis.addEventListener(EVENTS.RESIZE, this.handleOverlayRepositionEvent);
+    globalThis.addEventListener(EVENTS.RESIZE, handler);
   }
 
   /**
@@ -1059,10 +1073,13 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
    * the overlay elements on scroll or resize.
    */
   private removeOverlayRepositionEventListeners() {
-    globalThis.removeEventListener(EVENTS.SCROLL, this.handleOverlayRepositionEvent, {
+    const handler = this.eventHandlersMemo[AUTOFILL_OVERLAY_HANDLE_REPOSITION];
+    globalThis.removeEventListener(EVENTS.SCROLL, handler, {
       capture: true,
     });
-    globalThis.removeEventListener(EVENTS.RESIZE, this.handleOverlayRepositionEvent);
+    globalThis.removeEventListener(EVENTS.RESIZE, handler);
+
+    delete this.eventHandlersMemo[AUTOFILL_OVERLAY_HANDLE_REPOSITION];
   }
 
   /**

apps/browser/src/autofill/utils/index.ts

@@ -330,3 +330,20 @@ export function getPropertyOrAttribute(element: HTMLElement, attributeName: stri
 
   return element.getAttribute(attributeName);
 }
+
+/**
+ * Throttles a callback function to run at most once every `limit` milliseconds.
+ *
+ * @param callback - The callback function to throttle.
+ * @param limit - The time in milliseconds to throttle the callback.
+ */
+export function throttle(callback: () => void, limit: number) {
+  let waitingDelay = false;
+  return function (...args: unknown[]) {
+    if (!waitingDelay) {
+      callback.apply(this, args);
+      waitingDelay = true;
+      globalThis.setTimeout(() => (waitingDelay = false), limit);
+    }
+  };
+}

libs/common/src/autofill/constants/index.ts

@@ -54,6 +54,8 @@ export const SEPARATOR_ID = "separator";
 
 export const NOTIFICATION_BAR_LIFESPAN_MS = 150000; // 150 seconds
 
+export const AUTOFILL_OVERLAY_HANDLE_REPOSITION = "autofill-overlay-handle-reposition-event";
+
 export const AutofillOverlayVisibility = {
   Off: 0,
   OnButtonClick: 1,