diff --git a/app/client/src/pages/common/CanvasArenas/CanvasDraggingArena.tsx b/app/client/src/pages/common/CanvasArenas/CanvasDraggingArena.tsx
index cc678e8487..5a32e9c998 100644
--- a/app/client/src/pages/common/CanvasArenas/CanvasDraggingArena.tsx
+++ b/app/client/src/pages/common/CanvasArenas/CanvasDraggingArena.tsx
@@ -1,7 +1,9 @@
+import type { AppState } from "@appsmith/reducers";
 import { theme } from "constants/DefaultTheme";
 import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants";
 import React, { useMemo } from "react";
 import { useSelector } from "react-redux";
+import { isCurrentCanvasDragging } from "sagas/selectors";
 import { getIsAutoLayout } from "selectors/editorSelectors";
 import type { LayoutDirection } from "utils/autoLayout/constants";
 import { getNearestParentCanvas } from "utils/generators";
@@ -70,6 +72,10 @@ export function CanvasDraggingArena({
     stickyCanvasRef,
     slidingArenaRef,
   });
+
+  const isDragging = useSelector((state: AppState) =>
+    isCurrentCanvasDragging(state, widgetId),
+  );
   return showCanvas ? (
     <StickyCanvasArena
       canExtend={canExtend}
@@ -78,6 +84,7 @@ export function CanvasDraggingArena({
       getRelativeScrollingParent={getNearestParentCanvas}
       id={`div-dragarena-${widgetId}`}
       ref={canvasRef}
+      shouldObserveIntersection={isDragging}
       showCanvas={showCanvas}
       snapColSpace={snapColumnSpace}
       snapRowSpace={snapRowSpace}
diff --git a/app/client/src/pages/common/CanvasArenas/CanvasSelectionArena.tsx b/app/client/src/pages/common/CanvasArenas/CanvasSelectionArena.tsx
index 6461526c32..d782a635a9 100644
--- a/app/client/src/pages/common/CanvasArenas/CanvasSelectionArena.tsx
+++ b/app/client/src/pages/common/CanvasArenas/CanvasSelectionArena.tsx
@@ -511,6 +511,7 @@ export function CanvasSelectionArena({
       getRelativeScrollingParent={getNearestParentCanvas}
       id={getSlidingArenaName(widgetId)}
       ref={canvasRef}
+      shouldObserveIntersection={isDraggingForSelection}
       showCanvas={shouldShow}
       snapColSpace={snapColumnSpace}
       snapRowSpace={snapRowSpace}
diff --git a/app/client/src/pages/common/CanvasArenas/StickyCanvasArena.tsx b/app/client/src/pages/common/CanvasArenas/StickyCanvasArena.tsx
index 29a85a8c62..9057fbb846 100644
--- a/app/client/src/pages/common/CanvasArenas/StickyCanvasArena.tsx
+++ b/app/client/src/pages/common/CanvasArenas/StickyCanvasArena.tsx
@@ -15,6 +15,7 @@ interface StickyCanvasArenaProps {
   getRelativeScrollingParent: (child: HTMLDivElement) => Element | null;
   canExtend: boolean;
   ref: StickyCanvasArenaRef;
+  shouldObserveIntersection: boolean;
 }
 
 interface StickyCanvasArenaRef {
@@ -43,6 +44,7 @@ export const StickyCanvasArena = forwardRef(
       canvasPadding,
       getRelativeScrollingParent,
       id,
+      shouldObserveIntersection,
       showCanvas,
       snapColSpace,
       snapRows,
@@ -55,6 +57,7 @@ export const StickyCanvasArena = forwardRef(
         entries.forEach(updateCanvasStylesIntersection);
       }),
     );
+
     const resizeObserver = useRef(
       new ResizeObserver(() => {
         observeSlider();
@@ -88,20 +91,26 @@ export const StickyCanvasArena = forwardRef(
       entry: IntersectionObserverEntry,
     ) => {
       if (slidingArenaRef.current) {
-        const parentCanvas: Element | null = getRelativeScrollingParent(
-          slidingArenaRef.current,
-        );
+        requestAnimationFrame(() => {
+          const parentCanvas: Element | null = getRelativeScrollingParent(
+            slidingArenaRef.current,
+          );
 
-        if (parentCanvas && stickyCanvasRef.current) {
-          repositionSliderCanvas(entry);
-          rescaleSliderCanvas(entry);
-        }
+          if (parentCanvas && stickyCanvasRef.current) {
+            repositionSliderCanvas(entry);
+            rescaleSliderCanvas(entry);
+          }
+        });
       }
     };
+
     const observeSlider = () => {
-      interSectionObserver.current.disconnect();
-      if (slidingArenaRef && slidingArenaRef.current) {
-        interSectionObserver.current.observe(slidingArenaRef.current);
+      // This is to make sure the canvas observes and changes only when needed like when dragging or drw to select.
+      if (shouldObserveIntersection) {
+        interSectionObserver.current.disconnect();
+        if (slidingArenaRef && slidingArenaRef.current) {
+          interSectionObserver.current.observe(slidingArenaRef.current);
+        }
       }
     };
 
@@ -109,7 +118,14 @@ export const StickyCanvasArena = forwardRef(
       if (slidingArenaRef.current) {
         observeSlider();
       }
-    }, [showCanvas, snapRows, canExtend, snapColSpace, snapRowSpace]);
+    }, [
+      showCanvas,
+      snapRows,
+      canExtend,
+      snapColSpace,
+      snapRowSpace,
+      shouldObserveIntersection,
+    ]);
 
     useEffect(() => {
       let parentCanvas: Element | null;
@@ -126,7 +142,7 @@ export const StickyCanvasArena = forwardRef(
           resizeObserver.current.unobserve(slidingArenaRef.current);
         }
       };
-    }, []);
+    }, [shouldObserveIntersection]);
     return (
       <>
         {/* Canvas will always be sticky to its scrollable parent's view port. i.e,