From 59f001b047ed0168cf702d21df6151dcd8dbae21 Mon Sep 17 00:00:00 2001
From: Bernt Christian Egeland <cbegelan@gmail.com>
Date: Tue, 31 Aug 2021 16:15:18 +0200
Subject: [PATCH] added scrollbar width to observer width.

---
 web/src/components/CameraImage.jsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/web/src/components/CameraImage.jsx b/web/src/components/CameraImage.jsx
index a0896e2c8..c5b0dab128 100644
--- a/web/src/components/CameraImage.jsx
+++ b/web/src/components/CameraImage.jsx
@@ -10,7 +10,15 @@ export default function CameraImage({ camera, onload, searchParams = '', stretch
   const [hasLoaded, setHasLoaded] = useState(false);
   const containerRef = useRef(null);
   const canvasRef = useRef(null);
-  const [{ width: availableWidth }] = useResizeObserver(containerRef);
+  const [{ width: containerWidth }] = useResizeObserver(containerRef);
+
+  // Add scrollbar width (when visible) to the available observer width to eliminate screen juddering.
+  // https://github.com/blakeblackshear/frigate/issues/1657
+  let scrollBarWidth;
+  if (window.innerWidth && document.body.offsetWidth) {
+    scrollBarWidth = window.innerWidth - document.body.offsetWidth;
+  }
+  const availableWidth = scrollBarWidth ? containerWidth + scrollBarWidth : containerWidth;
 
   const { name } = config.cameras[camera];
   const { width, height } = config.cameras[camera].detect;