refactor: ensure Safari binds events to iframes

src/view/event-bindings/bind-events.ts

@@ -1,4 +1,3 @@
-import { IframeHTMLAttributes } from 'react';
 import { querySelectorAll } from '../../query-selector-all';
 import type {
   AnyEventBinding,
@@ -18,6 +17,26 @@ function getOptions(
   };
 }
 
+let loaded = false;
+
+function bindEvent(win: Window, binding: EventBinding, options: EventOptions) {
+  let timer: number | undefined;
+
+  if (!loaded) {
+    // Some browsers require us to defer binding events, i.e. Safari
+    timer = setInterval(() => {
+      if ((win as Window).document.readyState === 'complete') {
+        win.addEventListener(binding.eventName, binding.fn, options);
+        loaded = true;
+      }
+    }, 100);
+  } else {
+    win.addEventListener(binding.eventName, binding.fn, options);
+  }
+
+  return timer;
+}
+
 export default function bindEvents(
   el: HTMLElement | Window,
   bindings: AnyEventBinding[],
@@ -37,9 +56,10 @@ export default function bindEvents(
 
         const options = getOptions(sharedOptions, binding.options);
 
-        win.addEventListener(binding.eventName, binding.fn, options);
+        const timer = bindEvent(win as Window, binding, options);
 
         return function unbind() {
+          clearInterval(timer);
           win.removeEventListener(binding.eventName, binding.fn, options);
         };
       });