iOS "hold to copy" interferes with enlarge function #767

New issue

Open

opened 2026-02-20 10:20:22 -05:00 by deekerman · 1 comment

deekerman commented

2026-02-20 10:20:22 -05:00

Owner

Originally created by @juandpinto on GitHub (Mar 3, 2024).

On iOS (regardless of browser), the typical "hold to copy" feature is highlights an element when held and brings up a context menu. This makes it difficult to use the enlarge function in VTT (which can be especially useful on small touch-screen devices) since it interferes with the enlarged view and makes things generally awkward to use. This does not appear to be a problem with PCIO, so looking there might provide clues as to how to address this.

I believe the issue maybe as simple as setting the CSS user-select property using -webkit-user-select: none;, but I'd like to look a bit deeper into this. If I can make it work, I'll open a pull request for this.

Originally created by @juandpinto on GitHub (Mar 3, 2024). On iOS (regardless of browser), the typical "hold to copy" feature is highlights an element when held and brings up a context menu. This makes it difficult to use the enlarge function in VTT (which can be especially useful on small touch-screen devices) since it interferes with the enlarged view and makes things generally awkward to use. This does not appear to be a problem with PCIO, so looking there might provide clues as to how to address this. I believe the issue maybe as simple as setting the CSS user-select property using `-webkit-user-select: none;`, but I'd like to look a bit deeper into this. If I can make it work, I'll open a pull request for this.

deekerman added the

bug

user interface

labels

2026-02-20 10:20:22 -05:00

deekerman commented

2026-02-20 10:20:23 -05:00

Author

Owner

@bjalder26 commented on GitHub (Nov 25, 2024):

My guess is that we could prevent this behavior by adding event.preventDefault(); to the top of this function in widget.js.

this.onlongtouch = function(event) {
  this.showEnlarged();
  clearTimeout(this.timer);
  this.timer = null;
  this.domElement.classList.add('longtouch');
}

@bjalder26 commented on GitHub (Nov 25, 2024): My guess is that we could prevent this behavior by adding `event.preventDefault(); ` to the top of this function in widget.js. ```js this.onlongtouch = function(event) { this.showEnlarged(); clearTimeout(this.timer); this.timer = null; this.domElement.classList.add('longtouch'); } ```