[Bug] SVG render glitches when used inside of CSS container with Safari
- Dominant language
- TypeScript
- Stars
- 67.3k
- Forks
- 19.8k
- Avg merge
- 11d 14h
- Merged PRs (30d)
- 8
Description
### 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](https://developer.mozilla.org/en-US/docs/Web/CSS/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 (`` 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
```markdown
- 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_
Contributor guide
Research direction
Start with the linked CodePen minimal reproduction in Safari 18 and reproduce the legend-scroll behavior while resizing the CSS query container. Trace the SVG legend update during click and ResizeObserver or window-resize paths; done means the paginated legend remains visible without flicker or disappearing, matching other browsers.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100