PDF Viewer Increases or Decreases Space Between Pages on Zoom

[davidtom]

Attach (recommended) or Link to PDF file here: Online Web Viewer Demo

Configuration:

• Web browser and its version: Mozilla Firefox 99.0
• Operating system and its version: macOS 11.6
• PDF.js version: 2.14.137
• Is a browser extension: No

Steps to reproduce the problem:

1. Open the Online Web Viewer Demo
2. Notice the space between pages at 100% zoom
3. Zoom out to 10% zoom: the space between PDF pages is now noticeably larger
4. Zoom in to 300%: the space is now significantly thinner

What is the expected behavior? (add screenshot)

Other PDF viewers, such as macOS' preview maintain a consistent space between pages regardless of zoom. This is also true of the Firefox Browser for iOS, from which these screenshots are from:
Initial Zoom

Zoomed in

What went wrong?

Apologies if this is a strange issue to raise against the Web Viewer demo, but it seemed the easiest way for me to show the behavior. I'm opening this issue because I'm using the PDF Viewer in React Native and this behavior of resizing the space between pages on zoom/scale is causing a noticeable jump after pinch or tap to zoom.

I'm curious if this is expected behavior, and if so if there's a way we can disable it? Failing that, could you point me in the direction of where this resizing is happening so I can see if its possible to patch in our implementation? Any help or advice you can provide would be greatly appreciated!

[Snuffleupagus]

In the default viewer the space between pages is set, using the CSS in https://github.com/mozilla/pdf.js/blob/master/web/pdf_viewer.css, to be consistently 10px and this is thus being applied regardless of the zoom-value used in the viewer.
Please note that there's no JavaScript involved here, but only statically defined CSS rules.

Hence I'm having a slightly difficult time understanding this issue, since in my testing the page spacing is both consistent and completely independent of the viewer zoom level, given that your screen-shots don't appear to show the default viewer but only other (unrelated) viewers.

I'm opening this issue because I'm using the PDF Viewer in React Native

Given this, please keep the following in mind http://mozilla.github.io/pdf.js/getting_started/#introduction (emphasis mine):

The viewer is built on the display layer and is the UI for PDF viewer in Firefox and the other browser extensions within the project. It can be a good starting point for building your own viewer. However, we do ask if you plan to embed the viewer in your own site, that it not just be an unmodified version. Please re-skin it or build upon it.

[...] this behavior of resizing the space between pages on zoom/scale is causing a noticeable jump after pinch or tap to zoom.

Please note that the default viewer does not currently support using touch events for zooming (this is tracked in issue #2582). Hence, I suppose that it's possible that the touch event handling of the browser itself is (somehow) breaking things here.

[davidtom]

Thanks for the quick response. I expected this to be controlled by the CSS as well, but it seems like it's not hence why I'm reaching out. Apologies for the confusion on screenshots. Below are two screenshots from the pdf.js demo viewer at different zoom levels showing increased space between pages on zoom out:
100% Zoom

20% Zoom

Even though the CSS doesn't change, the space between the pages does seem to be expanding as one zooms out. So I'm curious if there's anything in the API that might be doing this, directly or indirectly. It sounds like the answer to that is no, in which case I'll look into other reasons this is happening. But if you are aware of anything in the API that might be related to this, I'd love to know about it to facilitate changing this in our implementation.

Regarding your other points:

Given this, please keep the following in mind http://mozilla.github.io/pdf.js/getting_started/#introduction (emphasis mine):

Yep, I've seen this and we are not just dropping the viewer into our project. I've used the webpack and mobile viewer examples to build our own implementation with the PDFViewer. We've also updated styles and modified parts of the API.

Please note that the default viewer does not currently support using touch events for zooming (this is tracked in issue #2582). Hence, I suppose that it's possible that the touch event handling of the browser itself is (somehow) breaking things here.

Ha yes very aware. In fact I think I've read every response in that issue on my journey to get pinch and tap to zoom to work in our PDF implementation. For what its worth, this code linked there has worked great for us so far.

I suppose it could be our tap/pinch zoom implementation causing this, but I don't think so because we use CSS transforms to zoom the PDF while the user is pinching and when the gesture ends we unset those transforms and scale the PDF via pdfViewer.currentScale = zoomFactor. The space between pages does not change while pinching, only once the gesture has ended - and we've therefore called pdfViewer.currentScale = zoomFactor. This is why I was curious if there's anything in the pdf.js API that may be causing this.

At any rate, thanks for your time responding to this issue.

[Snuffleupagus]

Even though the CSS doesn't change, the space between the pages does seem to be expanding as one zooms out.

Looking at your new screen-shots, the number of pixels between pages looks (as best as I can tell) to be identical for both zoom-values. Note that the CSS files use absolute units, hence the spacing will be identical regardless of zoom-level.
As such I really don't understand the problem here, since it seems to work as asked/expected :-)

However, I occurs to me that you might actually be asking for the spacing between pages to be relative (and thus somehow take the zoom-level into account)!?
I have no idea if you could simply change the affected CSS values to use relative units instead, since it's possible that many things will break with such a change (and it's not really something that we do/will support).

[davidtom]

Gotcha, appreciate the additional detail! Ultimately its good to confirm that this isn't something that the API is doing and rather something in the CSS.

All I really want is for the spacing between pages to remain the same regardless of zoom, which for one reason or another doesn't seem to be happening in our implementation. I'll avoid another screen shot on a closed issue, but if you open a PDF in the iOS Mozilla Browser, you'll see what I mean: if you zoom in, the gap between pages does not shrink.

Will go study up on my CSS as it seems like that's where the fix will be. Thanks again for your time!