From 10f1608f1d41743e7abaed3e1a8769acb49adb80 Mon Sep 17 00:00:00 2001
From: Isaac Connor <isaac@zoneminder.com>
Date: Fri, 27 Feb 2026 17:04:21 -0500
Subject: [PATCH] fix: use ResizeObserver for zone point positioning on initial
 load

Replace img load event listener with ResizeObserver on imageFeed
container. The old approach listened for load events on #imageFrame img
elements, which never fires for video-based streams (Go2RTC MSE) since
they use <video> not <img>. ResizeObserver fires whenever the container
dimensions change regardless of content type, fixing incorrect zone
point positions on initial load.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/skins/classic/views/js/zone.js | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/web/skins/classic/views/js/zone.js b/web/skins/classic/views/js/zone.js
index 219bd9196..e5830a3cf 100644
--- a/web/skins/classic/views/js/zone.js
+++ b/web/skins/classic/views/js/zone.js
@@ -716,11 +716,9 @@ function initPage() {
     imageFeed.appendChild(zoneSVG);
   }
 
-  document.querySelectorAll('#imageFrame img').forEach(function(el) {
-    el.addEventListener("load", imageLoadEvent, {passive: true});
-  });
+  var ro = new ResizeObserver(drawZonePoints);
+  ro.observe(imageFeed);
   window.addEventListener("resize", drawZonePoints, {passive: true});
-  // if the image link is broken for some reason we won't draw the points, so do it manually
   drawZonePoints();
 
   // Manage the BACK button
@@ -747,14 +745,6 @@ function panZoomOut(el) {
   zmPanZoom.zoomOut(el);
 }
 
-function imageLoadEvent() {
-  // We only need this event on the first image load to set dimensions.
-  // Turn it off after it has been called.
-  document.querySelectorAll('#imageFrame img').forEach(function(el) {
-    el.removeEventListener("load", imageLoadEvent, {passive: true});
-  });
-  drawZonePoints();
-}
 
 function Polygon_calcArea(coords) {
   var n_coords = coords.length;