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
1.89k stars 114 forks source link

On mobile, buttons underneath the settings modal get triggered when buttons on the modal are clicked #1309

Open geerew opened 3 weeks ago

geerew commented 3 weeks ago

Current Behavior:

On mobile, when you click the settings button, it opens a more mobile friendly modal.

If you click one of the buttons, for example, playback, and there is button behind the model in the position you click, the event will trigger for playback, but also travel through the modal, to the button behind, triggering that button as well

Expected Behavior:

Events on the modal should not 'fall through' to buttons behind the modal.

Steps To Reproduce:

  1. On mobile, navigate to https://www.vidstack.io/player/demo
  2. Click the settings button
  3. Click roughly in the middle of playback

This will trigger the styles.css button underneath

I have the same experience on my own site

geerew commented 3 weeks ago

Example video ..

In it I

  1. Refresh the page
  2. Click the settings button on the video player
  3. Click the middle of the playback button

This event bubbles through the modal to the styles.css button behind on page load config.json is selected), which triggers other behaviour on my mobile

https://github.com/vidstack/player/assets/494875/58fc6926-9df8-4908-ad51-02d09af88a7c