Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chrome selects entire document when highlighting text. #9843

Closed
burtonator opened this issue Jun 26, 2018 · 33 comments
Closed

Chrome selects entire document when highlighting text. #9843

burtonator opened this issue Jun 26, 2018 · 33 comments

Comments

@burtonator
Copy link

This problem has been existing for a while I think and hasn't yet been fixed on Chrome.

It's documented well here:

#4843

And there seem to be a lot of patches that address this issue. However, on Chrome the 'select entire document' problem remains.

Basically, if you're selecting a paragraph, the text in the current paragraph will initially work fine. But then what happens is that you'll get between lines, and then the entire document will be highlighted, then move to the next line and it jumps back and only selects where your mouse pointer is.

I can create a video if you want but if you just try to select text slowly on chrome it will exhibit this behavior.

We're building an annotation app on top of PDF.js and this prevents us from easily highlighting text.

Attach (recommended) or Link to PDF file here:

https://mozilla.github.io/pdf.js/web/viewer.html

Configuration:

  • Web browser and its version: Chrome Version 67.0.3396.62 (Official Build) (64-bit)

  • Operating system and its version: Ubuntu 18.04

  • PDF.js version: latest on mozilla.github.io/pdf.js

  • Is a browser extension: no

Steps to reproduce the problem:

  1. Launch chrome and load pdf
  2. Try to select text, if you drag slowly between lines, the entire document is selected.

What is the expected behavior? (add screenshot)

Same behavior on firefox.

What went wrong? (add screenshot)

Link to a viewer (if hosted on a site other than mozilla.github.io/pdf.js or as Firefox/Chrome extension):

https://mozilla.github.io/pdf.js/web/viewer.html

@burtonator
Copy link
Author

Any way I could help here? This is a super important bug for us...

@playtowork
Copy link

FWIW, I have the same problem and would appreciate if anyone knows a solution for this.

@ftc95
Copy link

ftc95 commented Oct 26, 2018

Fixed:
just add height:200px to
.textLayer > div {height:200px;}
in viewer.css

@burtonator
Copy link
Author

Just tested it... it SEEMS to make the problem better but doesn't completely rectify it.

@bikb
Copy link

bikb commented Mar 6, 2019

Little workaround:

if (sel.anchorNode) {   
  if (sel.anchorNode.className) {
    if (sel.anchorNode.className.match("textLayer") == "textLayer") {
       if (window.getSelection) {
          if (window.getSelection().empty) {  // Chrome
              window.getSelection().empty();
           } else if (window.getSelection().removeAllRanges) {  // Firefox
             window.getSelection().removeAllRanges();
           }
           } else if (document.selection) {  // IE?
             document.selection.empty();
           }
           $("#viewer").css({"-moz-user-select": "none"});
           console.log("selection off for 4 sec");
           wndow.setTimeout(function() {$("#viewer").css({"-moz-user-select": "text"});}, 4000);
           };
        }
    }

As event listener onselectionchange...

@burtonator
Copy link
Author

This is really a bug that needs to be fixed... its impacting multiple people.

Any way I can help mozilla?

@burtonator
Copy link
Author

@bikb on what element shouId I try that selectionchange listener?

@burtonator
Copy link
Author

Just FYI this is impacting a LOT of our users:

https://getpolarized.io/

... ALL... ? Chrome is the major browser and 85% of our users are on Chrome and using this. Love that it works in FF but would like to see it working on Chrome too.

@bikb
Copy link

bikb commented Mar 13, 2019

simply put it in:
document.addEventListener('selectionchange', function() {
}

@bikb
Copy link

bikb commented Mar 13, 2019

change the -moz-user-select to user-select because my fix was for firefox and you need it for chrome

@burtonator
Copy link
Author

@bikb thats ok but what is 'sel' ?I assume this is just window.getSelection() ?

@burtonator
Copy link
Author

Also, I think it just clears the selection ... right?

@burtonator
Copy link
Author

I think something like this would work.

Basically we prevent the default event handler when the selection is active and it's jumped into the parent.

Needs to be adjusted..

This stuff is prone to error so am I missing anything here?

https://gist.github.com/burtonator/1a097fe5c0b8212a84e83cba8e319773

One other feature I think is that the range should be extended based on the mouse position.

I think we could use elementsAtPoint based on the mouse position and changing the range but I still need to think about it.

@lawriebaberscovell-solirius

The selection behaviour is also the same on I.E. 11.

I E  11 - Highlight

@lawriebaberscovell-solirius

And on Safari...

Screenshot 2019-10-02 at 09 39 12

@lawriebaberscovell-solirius

The problem is also on Firefox - 69.0.1 (64-bit). Windows 10 Pro.

Start selection right of the 'Abstract' title. Drag down. This is the result. When expecting start of the paragraph to be selected.

Firefox (1) - Highlight

@lawriebaberscovell-solirius

Similar result if starting the selection left of the 'Abstract' title. Drag down.

@lawriebaberscovell-solirius

Also, a problem when the mouse is dragged from the document to off the document space (but still within the viewer). The selection alters to select everything on the page prior the original starting point. Tested on Firefox - 69.0.1 (64-bit). Windows 10 Pro.

Firefox (2) - Highlight

Moved the mouse further right to trigger the problem.

Firefox (3) - Highlight

@burtonator
Copy link
Author

It's funny that Mozilla complains that certain bugs are only fixed in Chrome but in one of their flagship OSS projects this bug has only been FIXED in Firefox for > 4 years now?

Can we figure out WHY it works in Firefox? If so we can implement a patch for the other browsers.

@burtonator
Copy link
Author

@lawriebaberscovell-solirius and I'm unclear, are you saying your PR fixes this bug? Is so you're my hero!

@timvandermeij
Copy link
Contributor

You can try the enhanced text selection mode, which is an experimental viewer preference. You can set the textLayerMode flag to 2 to enable it. Alternatively, go to https://mozilla.github.io/pdf.js/web/viewer.html, open the web console, run PDFViewerApplication.preferences.set('textLayerMode', 2); and refresh the page. I didn't notice a difference with regards to #9843 (comment) and #9843 (comment) in Firefox, but perhaps it does help in Chrome.

Note that this text selection mode is what is discussed in #4843 and that it's not enabled by default because it has some rough edges (most likely performance-wise since it does div expansion), which is tracked in #7584. If we know that this problem is reduced by it, we can perhaps take another shot at improving that so it can be enabled by default. If it doesn't fix it, we also have a bit more information to work with.

It's funny that Mozilla complains that certain bugs are only fixed in Chrome but in one of their flagship OSS projects this bug has only been FIXED in Firefox for > 4 years now?

Most of the behavior described here (although I think not everything has the same cause) happens in Firefox for me too, so I don't really know where this claim comes from, nor does it help to resolve the issue any sooner, so please keep comments limited to constructive ones.

@lawriebaberscovell-solirius

@lawriebaberscovell-solirius and I'm unclear, are you saying your PR fixes this bug? Is so you're my hero!

No - it doesn't. But the problem appears in Firefox as well.

@lawriebaberscovell-solirius

You can try the enhanced text selection mode, which is an experimental viewer preference. You can set the textLayerMode flag to 2 to enable it. Alternatively, go to https://mozilla.github.io/pdf.js/web/viewer.html, open the web console, run PDFViewerApplication.preferences.set('textLayerMode', 2); and refresh the page. I didn't notice a difference with regards to #9843 (comment) and #9843 (comment) in Firefox, but perhaps it does help in Chrome.

Note that this text selection mode is what is discussed in #4843 and that it's not enabled by default because it has some rough edges (most likely performance-wise since it does div expansion), which is tracked in #7584. If we know that this problem is reduced by it, we can perhaps take another shot at improving that so it can be enabled by default. If it doesn't fix it, we also have a bit more information to work with.

It's funny that Mozilla complains that certain bugs are only fixed in Chrome but in one of their flagship OSS projects this bug has only been FIXED in Firefox for > 4 years now?

Most of the behavior described here (although I think not everything has the same cause) happens in Firefox for me too, so I don't really know where this claim comes from, nor does it help to resolve the issue any sooner, so please keep comments limited to constructive ones.

Thanks Tim - We'll look into this.

@omerGithub8
Copy link

Did somebody find a solution in chrome to this problem?
This selection really makes the extension unusable, can't read properly.
(using the latest pdf.js GitHub version)

@chitgoks
Copy link

chitgoks commented Feb 6, 2022

Did somebody find a solution in chrome to this problem? This selection really makes the extension unusable, can't read properly. (using the latest pdf.js GitHub version)

did you try the textLayerMode - 2? i think its ok. but it has problem with regards to getting the text selection bounds since youll be getting bounds that are nor within the text's area.

if youre only concerned about selection, give that a try. but if you also need to get the bounds getClientRects, theyre whacked so its unusable.

@ghost
Copy link

ghost commented Mar 14, 2022

@chitgoks @timvandermeij Is it possible to use the textLayerMode - 2 with the pre-compiled PDF.JS ? I mean the one available here https://mozilla.github.io/pdf.js/build/pdf.js because we have an application that does not use NodeJS.
If possible, please provide sample code

@jeager
Copy link

jeager commented Jun 27, 2022

Any news, progress, or recommendations on this one?

Although textLayerMode - 2 works to make the selection better, when we get the selected bounds (getClientRects) it is a mess.

@jeager
Copy link

jeager commented Nov 23, 2022

@Snuffleupagus I understand closing the related issues, but would also be nice to share some perspective, if any, on this issue as well. Specially now that enhanceTextSelection has been removed.

@seanaye
Copy link

seanaye commented Dec 15, 2022

I am working on a fork for re-adding the enhanceTextSelection which was removed in #15259. Text selection is broken in Chromium without this feature.

If someone has found a better solution than this let me know

Einlar added a commit to Einlar/goldshish2 that referenced this issue Sep 5, 2023
- Follow the approach of the official PDFViewer to improve text selection
  performance.
- Unfortunately, it appears to work mostly on Firefox, and not on Chrome.
  There is an open issue about that, see:
  mozilla/pdf.js#9843
@Snuffleupagus
Copy link
Collaborator

Was this perhaps fixed, or at least improved, by PR #17923?

@nicolo-ribaudo
Copy link
Contributor

nicolo-ribaudo commented May 15, 2024

The issue described in #9843 (comment) still happens (in all browsers), while the rest of the examples that had a clear description on what to select and how to move the mouse seem to be fixed.

@mordonez-me
Copy link

Does this have a workaround or something for Chrome with pdfjs-dist?

@Snuffleupagus
Copy link
Collaborator

Let's close this as fixed by PR #17923, since the issue as originally filed has been addressed.

There's a lot of somewhat unrelated discussion above, making this a bit difficult to follow, and any further problems should really be filed separately to allow proper tracking.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests