[Bug]:safari上，自定义dom只要opacity小于1，就会导致该dom位置混乱

Describe the bug / 问题描述

 default: [
      'zoom-canvas',
      'drag-canvas',
      {
        type: 'collapse-expand',
        trigger: 'click',
        shouldBegin(e) {
          console.log('shouldBegin', animatloading)
          const model = e.item.getModel() // 获取当前节点的数据模型
          if (!['product-mode-total', 'field-total'].includes(model.type) || animatloading) return false
          animatloading = true
          return true
        },
        onChange(item, collapsed) {
          if (animatloading) clearTimeout(animateTimeOut)

          const model = item.getModel() // 获取当前节点的数据模型
          const icon = item.getContainer().find((ele) => ele.get('name') === 'collapse-icon')
          if (icon == null) return
          model.collapsed = collapsed
          if (collapsed) {
            icon.attr('text', '')
          } else {
            icon.attr('text', '')
          }

          let graph = window['_supplyGraph']
          function deepSetState(model) {
            if (!model || !Array.isArray(model.children)) return
            if (model.children.length) {
              model.children.forEach((child) => {
                let node = graph.findById(child.id)
                if (node) {
                  node && node.setState('collapsedChildren', collapsed) // 设置节点的折叠状态
                  deepSetState(node.getModel())
                }
              })
            }
          }
          if (graph) {
            deepSetState(model)
          }
          animateTimeOut = setTimeout(() => {
            animatloading = false
          }, animateCfg.duration + 100)
          return false
        }
      }
    ]
  },

G6.registerNode('field-card', {
    draw(cfg, group) {
      let { data = {} } = cfg
      let [width, height] = cfg.size
      let { productCardTitleLine } = data
      const shape = group.addShape('rect', {
        attrs: {
          x: 0,
          y: (productCardTitleLine === 2 ? 21 : 11) + 138,
          width: width,
          height: height
          // fill: 'rgba(0,0,0,0.5)'
        },
        name: 'main-box'
      })
      let dom = group.addShape('dom', {
        attrs: {
          x: 0,
          y: (productCardTitleLine === 2 ? 21 : 11) + 138,
          width: width,
          height: height,
          html: renderHtml(data, fieldCardClass, cfg)
        },
        name: 'card'
      })
      if (isOpenAnimate) {
        dom.animate((ratio) => {
          dom.attr('opacity', `${ratio}`)
        }, animateCfg)
      }
      return shape
    },
    update(cfg, item) {
      const dom = item.getContainer().find((ele) => ele.get('name') === 'card')
      if (dom) {
        dom.attr('html', renderHtml(item.getModel().data, fieldCardClass, cfg))
      }
    },
    setState(name, value, item) {
      if (name === 'collapsedChildren') {
        if (value && isOpenAnimate) {
          function getOpacity(ratio) {
            return `${Math.max(1 - ratio - 0.3, 0)}`
          }
          let dom = item.getContainer().find((ele) => ele.get('name') === 'card')
          dom.animate((ratio) => {
            dom.attr('opacity', getOpacity(ratio))
          }, animateCfg)
        }
      }
    }
  })

在谷歌上元素淡入淡出，在safari上展开时 元素不显示，到动画结束才出现，收起时元素直接隐藏。

Reproduction link / 复现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

No response

Version / 版本

4.x

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他

Start at the G6.registerNode('field-card') entry point and inspect the custom DOM shape's opacity animations on Safari. Create a minimal reproduction for the reported expand and collapse behavior, then verify that the fade-in and fade-out render continuously in Safari as they do in Chrome.