Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🐛 Position: fixed + overflow: scroll bug. #42

Open
austincallaghan opened this issue Apr 2, 2024 · 1 comment
Open

🐛 Position: fixed + overflow: scroll bug. #42

austincallaghan opened this issue Apr 2, 2024 · 1 comment
Labels
Type: Bug Something isn't working

Comments

@austincallaghan
Copy link

austincallaghan commented Apr 2, 2024

Describe the bug
When the tooltip is used in a container element that has position: fixed and is vertically scrollable the tooltip appears in the incorrect position. The bug gets more dramatic the further you scroll down.

To Reproduce

Steps to reproduce the behavior:

  1. Go to Bug Repl
  2. Hover the Tooltip text. Tooltip appears in the correct position ✅
  3. Scroll down any amount
  4. Hover the Tooltip text. Tooltip appears further up on the page than before ❌
  5. Continue to scroll down and hover to see the gap grow.

Expected behavior
The tooltip should appear positioned to the right of the Tooltip text at the same height no matter the scroll position and/or container position.

Screenshot 2024-04-02 at 12 41 08 PM

Screenshots
Screenshot 2024-04-02 at 12 42 30 PM

Desktop (please complete the following information):

  • OS: [macOS]
  • Browser [chrome, safari, firefox]
  • Version [3.0.0]

Smartphone (please complete the following information):

n/a: haven't confirm the bug happens on mobile

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
It looks like the containerRef.top value shrinks as you scroll down which might be why the distance/offset from the top shrinks as you scroll further.

A work around for this bug is to:

  1. On the parent/wrapping element of the Tooltip set the position: relative attribute
  2. Using a global selector (i.e .your-parent-element-class-or-id :global(.tooltip.animation-null.top)) override the inset property on the tooltip with inset: unset !important
  3. Add top: 0 !important;. This will need to be adjusted depending on the spacing.
@austincallaghan austincallaghan added the Type: Bug Something isn't working label Apr 2, 2024
@oyusipenko
Copy link

Hi everyone, are there any updates? Is the team planning to fix this bug?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants