diff --git a/integration_tests/snapshots/css/css-display/display.ts.6fe2068d1.png b/integration_tests/snapshots/css/css-display/display.ts.6fe2068d1.png
new file mode 100644
index 0000000000..4ebf568559
Binary files /dev/null and b/integration_tests/snapshots/css/css-display/display.ts.6fe2068d1.png differ
diff --git a/integration_tests/snapshots/css/css-display/display.ts.6fe2068d2.png b/integration_tests/snapshots/css/css-display/display.ts.6fe2068d2.png
new file mode 100644
index 0000000000..2f56e981be
Binary files /dev/null and b/integration_tests/snapshots/css/css-display/display.ts.6fe2068d2.png differ
diff --git a/integration_tests/specs/css/css-display/display.ts b/integration_tests/specs/css/css-display/display.ts
index 9673e18776..13985b7f8e 100644
--- a/integration_tests/specs/css/css-display/display.ts
+++ b/integration_tests/specs/css/css-display/display.ts
@@ -197,4 +197,53 @@ describe('display', () => {
 
     positioned.click();
   });
+
+  it('should works when reattach display none to dom tree in middle tree', async () => {
+    let one, two, three;
+    let container = createElement('div', {}, [
+      one = createElement('div', {
+        style: {
+          display: 'block'
+        }
+      }, [
+        createText('One')
+      ]),
+      createElement('div', {
+        style: {
+          display: 'none'
+        }
+      }),
+      createElement('div', {
+        style: {
+          display: 'none'
+        }
+      }),
+      createElement('div', {
+        style: {
+          display: 'none'
+        }
+      }),
+      two = createElement('div', {
+        style: {
+          display: 'none'
+        },
+      }, [
+        createText('Two')
+      ]),
+      three = createElement('div', {
+        style: {
+          style: 'block'
+        }
+      }, [
+        createText('Three')
+      ])
+    ]);
+    BODY.append(container);
+
+    await snapshot();
+
+    two.style.display = 'block';
+
+    await snapshot();
+  });
 });
diff --git a/webf/lib/src/dom/element.dart b/webf/lib/src/dom/element.dart
index 95b002204a..870dea5741 100644
--- a/webf/lib/src/dom/element.dart
+++ b/webf/lib/src/dom/element.dart
@@ -1441,11 +1441,21 @@ abstract class Element extends ContainerNode with ElementBase, ElementEventMixin
         RenderBoxModel _renderBoxModel = renderBoxModel!;
         // Find the renderBox of its containing block.
         RenderBox? containingBlockRenderBox = getContainingBlockRenderBox();
+        Node? previousSiblingNode = previousSibling;
         // Find the previous siblings to insert before renderBoxModel is detached.
-        RenderBox? preSibling = previousSibling?.renderer;
+        RenderBox? previousSiblingRenderBox = previousSiblingNode?.renderer;
+
+        // Search for elements whose style is not display: none.
+        while (previousSiblingRenderBox == null &&
+            previousSiblingNode is Element &&
+            previousSiblingNode.renderStyle.display == CSSDisplay.none) {
+          previousSiblingNode = previousSiblingNode.previousSibling;
+          previousSiblingRenderBox = previousSiblingNode?.renderer;
+        }
+
         // Original parent renderBox.
         RenderBox parentRenderBox = parentNode!.renderer!;
-        _renderBoxModel.attachToContainingBlock(containingBlockRenderBox, parent: parentRenderBox, after: preSibling);
+        _renderBoxModel.attachToContainingBlock(containingBlockRenderBox, parent: parentRenderBox, after: previousSiblingRenderBox);
       }
     }