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

[BUG] Offset + place have unexpected behavior in Safari #1239

Open
shahednasser opened this issue Jan 14, 2025 · 0 comments
Open

[BUG] Offset + place have unexpected behavior in Safari #1239

shahednasser opened this issue Jan 14, 2025 · 0 comments
Labels

Comments

@shahednasser
Copy link

shahednasser commented Jan 14, 2025

Check the troubleshooting page before opening an issue!

Make sure your problem isn't already covered at the troubleshooting page: https://react-tooltip.com/docs/troubleshooting


Bug description

I'm trying to place the tooltip at a dynamic offset based on a greater parent's width, and I've set place to right.

On chromium-based browsers, it works as expected:

Screenshot 2025-01-14 at 10 09 37 AM

The tooltip has the offset starting from the right of the node, as expected.

However, on Safari, it seems when place is set, the offset is set from the starting of the node, rather than the end:

Screenshot 2025-01-14 at 10 10 27 AM

I've reached this conclusion because when I remove place, the offset is handled correctly, but from the top rather than from the right. I've also tried to use a fixed offset rather than a dynamic one, and while place is set the result is the same.

You can find the code here. You can also reproduce it live on the Medusa documentation. (Edit: this is until this PR is merged which fixes the issue with a workaround)

I was able to fix it by detecting whether the current browser is Safari and setting the offset differently in that case.

Version of Package
v5.28.0

To Reproduce

Use the tooltip with offset + place set, and check it out on safari.

Expected behavior

The behavior of using offset + place should be consistent to handle it properly.

Screenshots

(Added them earlier)

Desktop (please complete the following information if possible or delete this section):

  • OS: iOS
  • Browser [e.g. chrome, safari]: Issue is on Safari
  • Version [e.g. 22]: Version 17.4.1 (19618.1.15.11.14)
  • Frameworks [e.g. React 18, Next.js 13]: React 19, Next.js 15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant