search

vidstack / player

UI components and hooks for building video/audio players on the web. Robust, customizable, and accessible. Modern alternative to JW Player and Video.js.
https://vidstack.io
MIT License
2.36k stars 137 forks source link

Conflict Between Player and Radix ScrollArea Prevents Mobile Scrolling Due to Shared CSS Variable #1439

Open kazemmdev opened 2 months ago

kazemmdev commented 2 months ago

Current Behavior:

When using the Vidstack video player in a page where Radix/ScrollArea is implemented, a conflict arises due to the shared CSS variable --slider-pointer between both components. This conflict prevents scrolling on mobile devices when users attempt to scroll by touch.

Expected Behavior:

The page should allow users to scroll smoothly on mobile devices without any issues, even when both the video player and Radix/ScrollArea are used together.

Steps To Reproduce:

  1. Set up a project with Vidstack video player and Radix/ScrollArea on the same page.
  2. Ensure that the ScrollArea and video player are both visible.
  3. Try to scroll using touch gestures on a mobile device.
  4. Notice that scrolling is not possible due to the CSS variable conflict.

Here’s a bit more context: the conflict arises from both components using the --slider-pointer CSS variable, leading to unintended side effects, especially with touch-based scrolling on mobile devices.

I added a repo for this here and you can also check out the project's live version here.

mattiaz9 commented 1 month ago

Same problem here, but it's related with the radix slider not the scroll area. If you comment out the slider in your demo the scrolling works.