Find programatically finds the search string but doesn't locate it

[popovd209]

First up

• The bug does not happen on https://mozilla.github.io/pdf.js/web/viewer.html
• The bug happens on https://pdfviewer.net/simple

Description of the bug I am using ngx-extended-pdf-viewer to display the pdf and to search it. Find works good - the string I search is found and highlighted but the problem is that it doesn't get located. The viewer works differently for different zoom values. On bigger files(horizontally big page size) if I have zoomed too much in when I use find next, the viewer just locates at the top left corner of the pdf file. Is there a property of the viewer I can use to solve this issue?

Version info

• ngx-extended-pdf-viewer - 18.1.14
• Angular - 14

[stephanrauh]

Does this happen only with the programmatic API, or does it also happen using the UI?

[popovd209]

It happens in both cases.

[stephanrauh]

Interesting. I can reproduce the bug by nagivating to https://pdfviewer.net/extended-pdf-viewer/find and setting the zoom level to 400%. Weird.

[stephanrauh]

I wonder if it's a CSS bug. The clientHeight of the page div is different from the scrollHeight. This, in turn, confuses the PDF viewer and makes it scroll the wrong <div>. This doesn't happen on https://mozilla.github.io/pdf.js/web/viewer.html.

[popovd209]

Have you got any suggestions on how to fix it? I tried other pdf viewers but I found this to be the best one, I really want to stick to it, but this is kind of a big problem. Thanks for your time.

[stephanrauh]

I think I'm going to modify a CSS rule in the next version. You can do this yourself, too, in the global styles.css, but if you can afford to update to the next version, that's the better approach.

ngx-extended-pdf-viewer  .pdfViewer .page {
    overflow: hidden;
}

However, I'd like to know why the overflow suddenly appears. Do you have an idea?

document.querySelector('.page[data-page-number="5"]').scrollHeight // yields 3555 when scaling to 400%
document.querySelector('.page[data-page-number="5"]').clientHeight // yields 3552

Opening the same file on https://mozilla.github.io/pdf.js/web/viewer.html, both lines return 3552. Where do the three pixels come from?

[popovd209]

Thanks a lot! I am using angular 14 so I have to stick to version 18 of the viewer, but I will implement the fix myself. Unfortunately, I don't know what causes the overflow.

[stephanrauh]

Your bugfix has landed with version 19.2.1. I've also prepared the bugfix in version 18, but it might take a while until I publish it.