Skip to content

πŸ› Position: fixed + overflow: scroll bug.Β #42

Open
@austincallaghan

Description

@austincallaghan

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type: BugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions