From 091e773ef70971af506bd1238d80ba32b2ecb365 Mon Sep 17 00:00:00 2001 From: Bernt Christian Egeland Date: Tue, 31 Aug 2021 16:39:33 +0200 Subject: [PATCH] subtract scrollBarWidth from scaledWidth --- web/src/components/CameraImage.jsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/web/src/components/CameraImage.jsx b/web/src/components/CameraImage.jsx index c5b0dab128..50d5a8ddb 100644 --- a/web/src/components/CameraImage.jsx +++ b/web/src/components/CameraImage.jsx @@ -14,7 +14,7 @@ export default function CameraImage({ camera, onload, searchParams = '', stretch // Add scrollbar width (when visible) to the available observer width to eliminate screen juddering. // https://github.com/blakeblackshear/frigate/issues/1657 - let scrollBarWidth; + let scrollBarWidth = 0; if (window.innerWidth && document.body.offsetWidth) { scrollBarWidth = window.innerWidth - document.body.offsetWidth; } @@ -28,7 +28,10 @@ export default function CameraImage({ camera, onload, searchParams = '', stretch const scaledHeight = Math.floor(availableWidth / aspectRatio); return stretch ? scaledHeight : Math.min(scaledHeight, height); }, [availableWidth, aspectRatio, height, stretch]); - const scaledWidth = useMemo(() => Math.ceil(scaledHeight * aspectRatio), [scaledHeight, aspectRatio]); + const scaledWidth = useMemo(() => Math.ceil(scaledHeight * aspectRatio - scrollBarWidth), [ + scaledHeight, + aspectRatio, + ]); const img = useMemo(() => new Image(), []); img.onload = useCallback(