Angular Ionic playbackRates menu opens and immediately closes

[jkyoutsey]

Description

In an Ionic Angular application when running in either Chrome with DevTools in mobile device mode, or actually running on a device (simulator in xcode or deployed to a mobile device) the playback rates button will open and then immediately close the menu with the rate buttons in it. Sometimes a longer press will cause it to stay open, but a tap is always an immediate open/close.

Reduced test case

https://github.com/jkyoutsey/ionic-videojs-playback-rates-flicker-bug

Steps to reproduce

1. Follow the instructions in the readme on the linked repo

Errors

No response

What version of Video.js are you using?

8.10.x

Video.js plugins used.

vjs-show-big-play-button-on-pause

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

Chrome 121.1.x and on iOS 17 app

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

Mac M1 Sonoma 14.2.1 and iOS 17.x

[welcome[bot]]

👋 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.

[jkyoutsey]

I think it has to do with the fact that on web this button will open the menu on hover, but on mobile there is no hover state. So, when you tap it on mobile there is some conflict in the processing between hover and touch.

This does NOT happen outside of an Ionic application.

[mister-ben]

I think I've heard of this before, it was to do with Ionic triggering a click event on the button when tapped on mobile. But since Video.js's buttons already react to a click or touchstart that's causing the button's handler to be called twice. There must a way to disable that in Ionic for certatin elements.

[br0ll]

I've been struggling with this issue as well for a long time, haven't found a solution yet, though.

[jkyoutsey]

This is an Ionic bug that should be fixed now/soon

https://github.com/ionic-team/ionic-framework/issues/29072