Skip to content

When Video.js is in a scrollable container, clicking the progress bar after scrolling causes the playback position to jump incorrectly before bouncing back to the target. #9161

Description

@wyy9630

Description

In my page, there are multiple videos placed within a scrollable container. After scrolling the container, dragging the video progress bar results in the playback position first jumping to an incorrect position on the video, then bouncing back to the target position.
This issue only occurs on Android devices: the getPointerPosition method (at /src/js/utils/dom.js:566) already includes special handling for iOS, but not for Android.
After troubleshooting, I identified the root cause: the findPosition method (at /src/js/utils/dom.js:504) is responsible for retrieving the element's position. It should use getBoundingClientRect(), but in version 7.9.4, this was changed to accumulate the offsetLeft property of dom.offsetParent recursively. Reverting this change to use getBoundingClientRect() should resolve the issue.

Reduced test case

https://codepen.io/ayjsuxgq-the-styleful/pen/zxKKqXQ

Steps to reproduce

Errors

No response

What version of Video.js are you using?

>=7.9.4 and 8.x

Video.js plugins used.

No response

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

Android Chrome

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

Android

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs: triageThis issue needs to be reviewed

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions