apache / apache/echarts

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

Open
#20,390 3 comments 0 reactions 0 assignees View on GitHub
bug en pending
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.