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

Label Position Misalignment in Safari Browser #204

Open
gaurav-shharma opened this issue Jun 4, 2024 · 1 comment
Open

Label Position Misalignment in Safari Browser #204

gaurav-shharma opened this issue Jun 4, 2024 · 1 comment

Comments

@gaurav-shharma
Copy link

The label element's position is incorrect when viewed in the Safari browser. This issue does not occur in Chrome.
As shown in the screenshot, the positions of the labels in the examples given by the library page are not aligned.

Screenshot 2024-06-04 at 10 40 30 PM
@felixSchober
Copy link

felixSchober commented Nov 20, 2024

I investigated a little bit and it seems like the position: absolute is causing the issue here.
The calculation for the coordinates are correct as you can see that the container is positioned correctly
image

Using position: fixed the label is in its correct position:
image

position: relative also works when you remove the translate:

<div
            style={{
              position: 'fixed',
              left: '50%',
              top: '50%',
              transform: 'translateX(-50%) translateY(-50%)',
              pointerEvents: 'all',
            }}
          >

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants