From d2df1dced7a7de4ed69b003c0069c7d7141bef05 Mon Sep 17 00:00:00 2001
From: Ze-Zheng Wu <zezhengwu@proton.me>
Date: Sun, 17 Aug 2025 02:30:16 +0800
Subject: [PATCH 1/4] fix: skip resize handler updates when DOM node is not
 visible

Prevent unnecessary resize calculations and error messages for invisible elements by checking visibility before processing dimensions
---
 .changeset/stupid-lizards-wash.md            | 5 +++++
 packages/react/src/hooks/useResizeHandler.ts | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/stupid-lizards-wash.md

diff --git a/.changeset/stupid-lizards-wash.md b/.changeset/stupid-lizards-wash.md
new file mode 100644
index 00000000..df4eae58
--- /dev/null
+++ b/.changeset/stupid-lizards-wash.md
@@ -0,0 +1,5 @@
+---
+'@xyflow/react': patch
+---
+
+Skip resize handler updates when DOM node is not visible
diff --git a/packages/react/src/hooks/useResizeHandler.ts b/packages/react/src/hooks/useResizeHandler.ts
index 4348208a..4577e23d 100644
--- a/packages/react/src/hooks/useResizeHandler.ts
+++ b/packages/react/src/hooks/useResizeHandler.ts
@@ -13,7 +13,7 @@ export function useResizeHandler(domNode: MutableRefObject<HTMLDivElement | null
 
   useEffect(() => {
     const updateDimensions = () => {
-      if (!domNode.current) {
+      if (!domNode.current || !(domNode.current.checkVisibility?.() ?? true)) {
         return false;
       }
       const size = getDimensions(domNode.current);

From 62fd1e0d9d91bf2680e76f94675df1fe273d4a0a Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Tue, 2 Sep 2025 11:44:40 +0200
Subject: [PATCH 2/4] correctly propagate style in Svelte Flow

---
 packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte b/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
index 847dc4e4..57608967 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
@@ -80,7 +80,6 @@
     autoPanOnConnect,
     autoPanOnNodeDrag,
     colorModeSSR,
-    style,
     defaultEdgeOptions,
     elevateNodesOnSelect,
     elevateEdgesOnSelect,

From 086b28e3a09a26449d3f67401ca2c1eb63f18cd6 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Tue, 2 Sep 2025 11:45:08 +0200
Subject: [PATCH 3/4] add hide/unhide buttons to example

---
 examples/react/src/examples/Basic/index.tsx   | 86 +++++++++++--------
 .../src/routes/examples/overview/Flow.svelte  | 16 ++++
 2 files changed, 64 insertions(+), 38 deletions(-)

diff --git a/examples/react/src/examples/Basic/index.tsx b/examples/react/src/examples/Basic/index.tsx
index 168bcff6..a24c908c 100644
--- a/examples/react/src/examples/Basic/index.tsx
+++ b/examples/react/src/examples/Basic/index.tsx
@@ -1,4 +1,4 @@
-import { MouseEvent, useCallback } from 'react';
+import { MouseEvent, useCallback, useState } from 'react';
 import {
   ReactFlow,
   MiniMap,
@@ -134,47 +134,57 @@ const BasicFlow = () => {
     });
     fitView();
   };
+  const [isHidden, setIsHidden] = useState(false);
 
+  const toggleVisibility = () => {
+    setIsHidden(!isHidden);
+  };
   return (
-    <ReactFlow
-      defaultNodes={initialNodes}
-      defaultEdges={initialEdges}
-      onNodesChange={console.log}
-      onNodeClick={onNodeClick}
-      onNodeDragStop={onNodeDragStop}
-      onNodeDragStart={onNodeDragStart}
-      onNodeDrag={onNodeDrag}
-      onSelectionDragStart={printSelectionEvent('selection drag start')}
-      onSelectionDrag={printSelectionEvent('selection drag')}
-      onSelectionDragStop={printSelectionEvent('selection drag stop')}
-      className="react-flow-basic-example"
-      minZoom={0.2}
-      maxZoom={4}
-      fitView
-      fitViewOptions={fitViewOptions}
-      defaultEdgeOptions={defaultEdgeOptions}
-      selectNodesOnDrag={false}
-      elevateEdgesOnSelect
-      elevateNodesOnSelect={false}
-      nodeDragThreshold={0}
-    >
-      <Background variant={BackgroundVariant.Dots} />
-      <MiniMap />
-      <Controls />
+    <>
+      <ReactFlow
+        defaultNodes={initialNodes}
+        defaultEdges={initialEdges}
+        onNodesChange={console.log}
+        onNodeClick={onNodeClick}
+        onNodeDragStop={onNodeDragStop}
+        onNodeDragStart={onNodeDragStart}
+        onNodeDrag={onNodeDrag}
+        onSelectionDragStart={printSelectionEvent('selection drag start')}
+        onSelectionDrag={printSelectionEvent('selection drag')}
+        onSelectionDragStop={printSelectionEvent('selection drag stop')}
+        className="react-flow-basic-example"
+        style={{ display: isHidden ? 'none' : 'block' }}
+        minZoom={0.2}
+        maxZoom={4}
+        fitView
+        fitViewOptions={fitViewOptions}
+        defaultEdgeOptions={defaultEdgeOptions}
+        selectNodesOnDrag={false}
+        elevateEdgesOnSelect
+        elevateNodesOnSelect={false}
+        nodeDragThreshold={0}
+      >
+        <Background variant={BackgroundVariant.Dots} />
+        <MiniMap />
+        <Controls />
 
-      <Panel position="top-right">
-        <button onClick={resetTransform}>reset transform</button>
-        <button onClick={updatePos}>change pos</button>
-        <button onClick={toggleClassnames}>toggle classnames</button>
-        <button onClick={logToObject}>toObject</button>
+        <Panel position="top-right">
+          <button onClick={resetTransform}>reset transform</button>
+          <button onClick={updatePos}>change pos</button>
+          <button onClick={toggleClassnames}>toggle classnames</button>
+          <button onClick={logToObject}>toObject</button>
 
-        <button onClick={deleteSelectedElements}>deleteSelectedElements</button>
-        <button onClick={deleteSomeElements}>deleteSomeElements</button>
-        <button onClick={onSetNodes}>setNodes</button>
-        <button onClick={onUpdateNode}>updateNode</button>
-        <button onClick={addNode}>addNode</button>
-      </Panel>
-    </ReactFlow>
+          <button onClick={deleteSelectedElements}>deleteSelectedElements</button>
+          <button onClick={deleteSomeElements}>deleteSomeElements</button>
+          <button onClick={onSetNodes}>setNodes</button>
+          <button onClick={onUpdateNode}>updateNode</button>
+          <button onClick={addNode}>addNode</button>
+        </Panel>
+      </ReactFlow>
+      <button onClick={toggleVisibility} style={{ position: 'absolute', zIndex: 10, right: 10, top: 100 }}>
+        {isHidden ? 'Show' : 'Hide'} Flow
+      </button>
+    </>
   );
 };
 
diff --git a/examples/svelte/src/routes/examples/overview/Flow.svelte b/examples/svelte/src/routes/examples/overview/Flow.svelte
index 3075a0e8..e83548fd 100644
--- a/examples/svelte/src/routes/examples/overview/Flow.svelte
+++ b/examples/svelte/src/routes/examples/overview/Flow.svelte
@@ -155,6 +155,8 @@
 		// console.log(edges.map((edge) => ({ id: edge.id, selected: edge.selected })));
 		edges.forEach((edge) => console.log({ id: edge.id, selected: edge.selected }));
 	});
+
+	let hidden = $state(false);
 </script>
 
 <!-- oninit={() => console.log('on init')}
@@ -197,6 +199,7 @@
 	}} -->
 
 <SvelteFlow
+	style="display:{hidden ? 'none' : 'block'}"
 	bind:nodes
 	bind:edges
 	{nodeTypes}
@@ -247,7 +250,20 @@
 	<InitTracker />
 </SvelteFlow>
 
+<button
+	class="hide"
+	onclick={() => {
+		hidden = !hidden;
+	}}>Hide/Unhide</button
+>
+
 <style>
+	.hide {
+		position: absolute;
+		top: 80px;
+		right: 15px;
+	}
+
 	:root {
 		/* --background-color: #ffffdd; */
 		--background-pattern-color: #5050ff;

From 86e8b49133370b97deeed5269d040b01dc2d3097 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Tue, 2 Sep 2025 11:48:32 +0200
Subject: [PATCH 4/4] add changeset

---
 .changeset/stupid-lizards-wash.md | 2 +-
 .changeset/wet-beds-greet.md      | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/wet-beds-greet.md

diff --git a/.changeset/stupid-lizards-wash.md b/.changeset/stupid-lizards-wash.md
index df4eae58..27d79b2a 100644
--- a/.changeset/stupid-lizards-wash.md
+++ b/.changeset/stupid-lizards-wash.md
@@ -2,4 +2,4 @@
 '@xyflow/react': patch
 ---
 
-Skip resize handler updates when DOM node is not visible
+Fix warning when display is set to none on the wrapper div
diff --git a/.changeset/wet-beds-greet.md b/.changeset/wet-beds-greet.md
new file mode 100644
index 00000000..5c1b140b
--- /dev/null
+++ b/.changeset/wet-beds-greet.md
@@ -0,0 +1,5 @@
+---
+'@xyflow/svelte': patch
+---
+
+Fix style attribute not being propagated to wrapper