apache / apache/echarts

[Bug] tooltip appendTo body briefly causes scrollbar visible in Safari

Open
#20,644 0 comments 2 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.6.0

### Link to Minimal Reproduction

https://github.com/IceAndSnow/echarts-safari-tooltip-bug

### Steps to Reproduce

Move mouse around over bar and take a close look at the scrollbar flickering that happens (only when using Safari).

If you don't use my repo and would like to reproduce the bug, do the following:

1. Make sure the body element takes up exactly 100% of the view height
2. Make a chart with tooltip configured with `appendTo: 'body'`
3. Hover over the graph in Safari browser and look closely for the scrollbar (it will only happen first time hovering the bar, so if you didn't see it, refresh page or clear chart and set option again).

In my repo, I repeatedly clear and set the option of the chart every 500ms to give you more chances to spot the scrollbar flickering on and off.

### Current Behavior

When the tooltip appears for the first time, it will briefly be visible at the end of body before it is moved to its proper place.
On Chrome, Edge and Firefox this seems to have no side-effect (as it is moved before it causes any problems) but when using Safari, the scroll bar will occasionally appear for a split second.

See this screenshot that I took by breaking on subtree modification on the body-element (notice the two scrollbars):

![Screenshot 2025-01-02 at 15 27 57](https://github.com/user-attachments/assets/8b88b868-4c7d-4923-bbc6-2b813e65e54e)

### Expected Behavior

The same behavior across all browsers. I would expect the tooltip to be `visibility: hidden` until it has been moved to its correct location.

### Environment

```markdown
- OS: macOS Sequoia
- Browser: Safari 18.2 (20620.1.16.11.8)
- Framework: Plain HTML/JS/CSS
```

### Any additional comments?

In my use case, I update the chart every time I hover over elements (as I want colors in the chart). This means that this initial flicker when using Safari gets more chances to appear making the user experience flawed.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.