fix auto-expand

1 files changed, 8 insertions, 5 deletions

diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
index eb49a01d..e7616b98 100644
--- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
+++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
@@ -42,6 +42,11 @@ onUiLoaded(async() => {
         }
     }
 
+    // Detect whether the element has a horizontal scroll bar
+    function hasHorizontalScrollbar(element) {
+        return element.scrollWidth > element.clientWidth;
+    }
+
     // Function for defining the "Ctrl", "Shift" and "Alt" keys
     function isModifierKey(event, key) {
         switch (key) {
@@ -650,16 +655,14 @@ onUiLoaded(async() => {
         }
 
         // Simulation of the function to put a long image into the screen.
-        // We define the size of the canvas, make a fullscreen to reveal the image, then reduce it to fit into the element.
+        // We detect if an image has a scroll bar or not, make a fullscreen to reveal the image, then reduce it to fit into the element.
         // We hide the image and show it to the user when it is ready.
         function autoExpand(e) {
             const canvas = document.querySelector(`${elemId} canvas[key="interface"]`);
             const isMainTab = activeElement === elementIDs.inpaint || activeElement === elementIDs.inpaintSketch || activeElement === elementIDs.sketch;
+
             if (canvas && isMainTab) {
-                if (canvas && parseInt(targetElement.style.width) > 862 || parseInt(canvas.width) < 862) {
-                    return;
-                }
-                if (canvas) {
+                if (hasHorizontalScrollbar(targetElement)) {
                     targetElement.style.visibility = "hidden";
                     setTimeout(() => {
                         fitToScreen();