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] Mouse interactions are misaligned if slider is inside iframe. #143

Open
thinkexec opened this issue May 9, 2024 · 4 comments
Open
Labels
bug Something isn't working investigating Not quite sure if it's valid, yet

Comments

@thinkexec
Copy link

Describe the bug
When slider is housed inside an iframe that is offset from the window (0,0) position, it is impossible to correctly use it. Starting to
drag the slider with the mouse works fine (the ball can be picked up where it's visible). To actually set a value though mouse has to be moved to area where iframe would be if it was placed at (0,0) in the window.

To Reproduce

Expected behavior
I would like the slider to know it's actual position not based on the window(?).
Should there be an option to pass parent element?

Screenshots
If applicable, add screenshots to help explain your problem.
image

Device/Environment
Please describe the environment and device the bug was found on, if relevant.

Additional context
Add any other context about the problem here.

@thinkexec thinkexec added bug Something isn't working investigating Not quite sure if it's valid, yet labels May 9, 2024
@simeydotme
Copy link
Owner

thanks for the detailed bug report!
appreciate that and will investigate asap

@simeydotme
Copy link
Owner

simeydotme commented May 10, 2024

oh do you think you could use the REPL to reproduce the issue for me?

(which is funny, because the REPL is inside an iFrame 🤔 )

@thinkexec
Copy link
Author

Yeah just debugged REPL and indeed it is using iframe.
Wonder if there is some workaround or override in REPL done under the hood to make that iframe super isolated?
Something I failed to do in the project I am working on (and unfortunately can't just share it :( )

For now in that project I just reverted to using plain <input type="range".../> and it is handling the position just fine out of the box.

@simeydotme
Copy link
Owner

Yeah just debugged REPL and indeed it is using iframe. Wonder if there is some workaround or override in REPL done under the hood to make that iframe super isolated?

not sure, are you using any special positioning or transforms on the iFrame? I would imagine something since I can see it's working more like a traditional frameset (whole height, right-side). Is it in a grid, or flexbox ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working investigating Not quite sure if it's valid, yet
Projects
None yet
Development

No branches or pull requests

2 participants