Play/Pause Button Rapid Toggling on Touchscreen Devices in Chrome-based Browsers (Edge/Chrome)

[sxbgwjs]

Server Version#:1.41.4.9463 dsm7.2.2
Player Version#:chrome
Subject: Play/Pause Button Rapid Toggling on Touchscreen Devices in Chrome-based Browsers (Edge/Chrome)
Affected Platforms: Plex Web App (Chrome/Edge on Android, Tablets)

---

​Issue Description​

When using the Plex web app on ​touchscreen devices​ (phones, tablets, car infotainment systems) with ​Chrome-based browsers​ (Chrome, Edge), a single tap on the play/pause button causes rapid toggling between playback states (play ⇄ pause). This results in unresponsive controls, requiring a long-press to stabilize the action. The issue does NOT occur in Safari or native Plex apps.

​Steps to Reproduce​

1. Open Plex Web (app.plex.tv) on a touchscreen device using Chrome/Edge.
2. Play any audio or video file.
3. Lightly tap the play/pause button once.
4. ​Observed Behavior: Playback state toggles rapidly (e.g., play → pause → play).
5. ​Expected Behavior: A single tap should toggle the state once (play ⇄ pause).

​Technical Details​

• ​Root Cause: Likely due to Chrome’s hybrid handling of touchstart and click events, triggering multiple overlapping actions. Safari prioritizes touch events correctly.
• ​Debugging Evidence:
  • Chrome’s Event Listener breakpoints show both touchstart and click triggered on a single tap.
  • Adding touch-action: manipulation; to the button CSS mitigates the issue temporarily.
• ​Affected Browsers: Chrome 115+, Edge 115+ (Chromium-based).

​Device & Software Info​

markdown

- Devices: Xiaomi Pad 6 (Android 13),  NIO car (Chromium)  
- Plex Server Version: 1.41.4.9463 (NAS: Synology DS218+)  
- Browser Versions: Chrome  Edge 

​Additional Notes​

This issue severely impacts usability in touch-first environments (e.g., car infotainment). A fix could involve:

• Adding event debouncing for play/pause actions.
• Using touch-event prioritization and suppressing redundant click triggers.