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.

Sign up for GitHub

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

Jump to bottom

Mouseover tooltip on progress bar is not in sync with cursor when Zoom is used in css #8759

Open
surajsokasane opened this issue Jun 7, 2024 · 2 comments
Open

Mouseover tooltip on progress bar is not in sync with cursor when Zoom is used in css #8759

surajsokasane opened this issue Jun 7, 2024 · 2 comments
Labels
needs: triage This issue needs to be reviewed

Comments

@surajsokasane
Copy link

Description

mouse over tooltip, which displays the time where the cursor is currently. It's position is calculated according to the percentage where mouse is.
But when we use Zoom in body, the width of progress bar is not real and so the tooltip is displayed eigther on left or right side of cursor depending on zoom in or zoom out.

Reduced test case

https://stackblitz.com/edit/stackblitz-starters-nwb3mh?file=src%2Fglobal_styles.css

Steps to reproduce

  1. Add a video in html
  2. Give it any source -mp4/m3u8
  3. Add Zoom: 80% to body in css
  4. hover on progressbar of video

Errors

The mousehover tooltip is not in sync with cursor

What version of Video.js are you using?

8.12.0

Video.js plugins used.

None

What browser(s) including version(s) does this occur with?

Chrome 125.0.6422.142

What OS(es) and version(s) does this occur with?

All
@surajsokasane surajsokasane added the needs: triage This issue needs to be reviewed label Jun 7, 2024
@welcome Welcome
Copy link

welcome bot commented Jun 7, 2024

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

@mister-ben
Copy link
Contributor

It seems getting the effective css zoom applied to an element is difficult other than on Firefox, which supports a currentCSSZoom property

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
needs: triage This issue needs to be reviewed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mister-ben @surajsokasane