diff --git a/core/frontend/src/components/canvas/DeCanvas.vue b/core/frontend/src/components/canvas/DeCanvas.vue
index 4c206ddadf..901e9e5361 100644
--- a/core/frontend/src/components/canvas/DeCanvas.vue
+++ b/core/frontend/src/components/canvas/DeCanvas.vue
@@ -175,7 +175,9 @@ export default {
       outStyle: {
         width: null,
         height: null
-      }
+      },
+      resizeObserver: null,
+      resizerTimer: null
     }
   },
   computed: {
@@ -239,18 +241,18 @@ export default {
   created() {
   },
   mounted() {
-    const _this = this
-    // 监听div变动事件
-    const erd = elementResizeDetectorMaker()
-    erd.listenTo(document.getElementById(this.canvasDomId), element => {
-      _this.$nextTick(() => {
-        _this.restore()
-      })
+    this.resizeObserver = new ResizeObserver(() => {
+      this.resizerTimer && clearTimeout(this.resizerTimer)
+      this.resizerTimer = setTimeout(() => {
+        this.$nextTick(this.restore)
+      }, 500)
     })
+    this.resizeObserver.observe(document.getElementById(this.canvasDomId))
   },
   beforeDestroy() {
     bus.$off('component-dialog-edit', this.editDialog)
     bus.$off('button-dialog-edit', this.editButtonDialog)
+    this.resizeObserver?.disconnect()
   },
   methods: {
     getWrapperChildRefs() {