Issues with text selection / annotations on touch devices

[valentin-schoeneich]

Hi,

I’m currently working with pdf.js (integrated in an Angular application) and running into some inconsistent behavior when interacting with text selection and annotations on touch devices (primarily tablets and smartphones).

Issues:
• When selecting text with a finger, it often ends up selecting entire paragraphs instead of the intended word or small text range.
• In some cases, the viewer initially does not respond at all to touch input when trying to start a text selection.
• The behavior feels inconsistent and somewhat unreliable compared to desktop interactions.

At the moment, it is unclear whether this behavior is a known limitation or issue within pdf.js itself, or if it is expected due to how browsers handle touch events and text selection. It is also possible that the issue is caused or amplified by my own application layer, for example through overlays, custom event handling, or CSS.

Has anyone experienced similar issues with touch-based text selection in pdf.js?

Has anyone encountered similar issues with touch-based text selection in pdf.js? I would be interested to know whether this is a common limitation, and if there are recommended approaches or best practices to improve the user experience on touch devices.

[shreyanshjain1]

What you’re describing does not sound totally surprising on touch devices, and I would not assume it is only your Angular layer or only pdf.js.

On phones/tablets, text selection is usually much more dependent on the browser’s native touch-selection behavior than on desktop, so once pdf.js text layers, annotation layers, overlays, CSS, or custom event handling get involved, the behavior can get inconsistent pretty fast.

So I’d probly split the problem into 2 parts:

1. Check whether it also happens in the stock pdf.js viewer

   • if it already behaves badly there on the same device/browser, then it is more likely a pdf.js + browser touch-selection limitation
   • if it works there but breaks in your app, then your integration layer is probly making it worse

2. Check for app-layer interference
   Things I’d inspect first:

   • overlays sitting above the text layer
   • pointer-events
   • user-select
   • custom touchstart / touchmove / pointerdown handlers
   • CSS that changes selection or gesture behavior
   • annotation/highlight layers intercepting input

A lot of the “selects too much text” / “selection wont start” behavior on mobile ends up being some combo of:

• browser-native touch selection quirks
• text layer positioning
• another layer partially catching the touch input

So my guess would be:

• yes, this kind of thing can be a real limitation / rough edge on touch devices
• but it can also be made noticeably worse by the integration layer

If you want the cleanest next step, I’d test the same PDF on:

• the stock pdf.js viewer
• your Angular integration
• the same mobile browser on both

If the issue only appears in your app, I’d focus first on CSS / overlays / event handlers.
If it also appears in the stock viewer, then it is much more likely a broader touch-selection limitation around pdf.js + that browser.

Would be interesting to know which browser/device combos you tested, because mobile Safari vs Chrome on Android can behave pretty differently here.

If this helps, feel free to mark it as the answer so others can find it faster.