[Bug] SVG render glitches when used inside of CSS container with Safari

[shadow-identity]

Version

5.5.1

Link to Minimal Reproduction

https://codepen.io/shadow-identity/pen/rNXegYJ

Steps to Reproduce

1. Set an HTML element to be a CSS query container.
2. Add an element inside of the container, initialize echarts instance on it
3. Put some options to the echarts instance, set legend: {type: "scroll"}
4. Make the legend to not fit into provided space, so the legend is paginated.
5. Make the container to resize on window resize event or using ResizeObserver
6. Click on legend items
7. Slowly resize container, keeping the legend in "scroll" state
8. Resize container using javascript

Current Behavior

On steps 6-8:

• click on legend randomly removes or adds the legend (<g> element) from the SVG instance (only pagination buttons are always visible)
• changing echarts container size causes legend flickering and glitching
• stop changing echarts container can make the legend to stay disappeared
• legend appears on hover
• legend appears without any interaction after about 10-20 seconds
• legend may not be visible from the beginning if the echarts container is resized immediately after mount

Expected Behavior

Legend should be always visible like on any other browser

Environment

- OS:MacOS 15.0
- Browser: 
  - stable Safari 18.0 (20619.1.26.31.6), 
  - Safari Technology Preview Release 203 (Safari 18.0, WebKit 20620.1.6)
- Framework: vanilla

Any additional comments?

No response