Use more natural zooming on mobile

[snorp]

Right now you have to hit the plus/minus buttons even on mobile in order to zoom the document. This is really strange especially since pinch-to-zoom is active as well. I think the best way to go on mobile is maybe to render at a "natural" size, and let the browser control the zoom, similar to a web page.

[betovidal]

@MickL I gave it a try. I was able to avoid the "pinch zoom" cancellation by adding the CSS property "pointer-events: none" to the classes pdfViewer and page (and calling stopPropagation + preventDefault when viewerContainer dispatches double touch events so the entire page doesn't zoom on iOS).

I'm having the same issue you describe of not having the perfect zoom position event when I use the modified mousewheel method (pass the next scale to be applied, current "middle position" or target and the delta of "middle position" to know how much to move to left, right, up, down, managed by pdfViewer.container.scrollLeft and pdfViewer.container.scrollTop). There seems to be always an error introduced maybe by the timeout that keeps the viewer from rendering on every double touch event.

Any hint on where to apply those CSS scale transformations to avoid rendering everything on every scale delta?

[buzzyboy]

@betovidal I know it's been a few months since your last post. Have you made any updates on getting pinch-zooming to work in PDF.js? I'm working on a project for work that requires this. Maybe we could work together to figure something out?

[vuinguyen]

@squallstar I tested your solution on iOS very briefly. And so far, it's working for me! Thanks for sharing your solution 💯

[squallstar]

@vuinguyen thanks! I'm glad it worked for you too ;)

[sunsus]

+1

[prohtex]

Any hope of getting @squallstar's code integrated into a PR? Currently, if a user tries to pinch and zoom on a mobile device, they are often "locked" out of scrolling, and have to reload the page simply to navigate further. Relying on the tiny "+" and "-" buttons to navigate is rather counterintuitive for a mobile viewer in 2018.

[MickL]

Pinch-zoom is "broken" on iOS since iOS 10. Even if everything is implemented perfectly Safari will screw everything up.

[prohtex]

Is this an iOS specific issue? Is it possible to pinch zoom a PDF served by pdfjs on Android?

[MickL]

Depends on the browser. I assume that only iOS browsers ignore "user-scalable=no".

[prohtex]

Right now you have to hit the plus/minus buttons even on mobile in order to zoom the document. This is really strange especially since pinch-to-zoom is active as well. I think the best way to go on mobile is maybe to render at a "natural" size, and let the browser control the zoom, similar to a web page.

To me, this says it all. I guess this is less about a specific feature and rather an approach to mobile experience.

I assume that only iOS browsers ignore "user-scalable=no".

Correct.

[amurillo17]

I saw that "Box Content Preview" (which uses PDFJS to show PDFs) does a good implementation for this. This is a Codepen of their viewer:

https://codepen.io/box-platform/pen/rmZdjm

And this is the pull request for their fix:

https://github.com/box/box-content-preview/pull/567

I thought that maybe someone could make something similar for PDFJS, based on their solution. I'll try to implement it myself and post the code if I do. I'll be great if someone else (that probably have more experience than me) can also collaborate and try it!

[prohtex]

@amurillo17 thanks for the link. The Box solution looks fantastic. I'd love to see something like this working with pdfjs. Please keep us updated on your progress!

[tefracky]

Is there any good solution for this problem?

[chrisgillis]

Any updates for this? Would be a great feature to have!

[rcarretteGroupeBRIAND]

any updates ? Thanks

[AnReZa]

Are there any simple ways to add this feature to the existing viewer?

[prohtex]

Are there any simple ways to add this feature to the existing viewer?

No.

[AnReZa]

@prohtex Hm, that's pretty sad. I hope, that such a feature will be added soon after all these years.

[prohtex]

@prohtex Hm, that's pretty sad. I hope, that such a feature will be added soon after all these years.

It will only be added when someone steps up and integrates code into a PR (not me, sadly), and even then, it could take years.

[M-Reimer]

I have a workaround, but it is "Android only" as I don't care about iOS in my "Firefox for Android" addon: https://github.com/M-Reimer/android-pdf-js/blob/master/patches/pdfjs-pinch-gestures.js My Makefile just appends this to "web/viewer.js". It registers to the touch events and translates the pinch gestures to button clicks.

[AnReZa]

I have a workaround, but it is "Android only" as I don't care about iOS in my "Firefox for Android" addon:

It works on my iPad as well, but it feels a little bit sluggish and not very natural. It zooms one step after each pinch. So you have to release the fingers to make it zoom and it doesn't matter how far of a distance you have pinched. Is this the normal behavior, or just a device-specific bug? Thank you anyways, cause this is a step into the right direction.

[prohtex]

It works on my iPad as well, but it feels a little bit sluggish and not very natural. It zooms one step after each pinch. So you have to release the fingers to make it zoom and it doesn't matter how far of a distance you have pinched. Is this the normal behavior, or just a device-specific bug? Thank you anyways, cause this is a step into the right direction.

Looking at the code, this is not a viable solution or even a good workaround. All this does is watch for zoom events and simulate clicking on the [-] [+] buttons with jQuery.

[AnReZa]

@prohtex Exactly. If you try it, it does something, but it doesn't work well at all.

[M-Reimer]

As I said: Not perfect but better than nothing. At least for me it's easier to do the pinch gesture than to hit a small zoom button on a small mobile screen. It makes gestures work that every mobile device user expects to work.

It works on my iPad as well, but it feels a little bit sluggish and not very natural. It zooms one step after each pinch. So you have to release the fingers to make it zoom and it doesn't matter how far of a distance you have pinched. Is this the normal behavior, or just a device-specific bug? Thank you anyways, cause this is a step into the right direction.

It hits the buttons. "Natural zooming" is not possible with this simple approach and I don't want to mess too much with PDF.js. This is not the goal of my Addon.

But it should be possible to do multiple button presses depending on how far the fingers have moved. I'll try that.

Looking at the code, this is not a viable solution or even a good workaround. All this does is watch for zoom events and simulate clicking on the [-] [+] buttons with jQuery.

I'm open to suggestions, but as this is part of an Addon which just wants to make PDF.js usable as PDF viewer inside Firefox, I won't do deep modifications.

BTW: There is not a single line of jQuery in my code. This is raw JavaScript.

[M-Reimer]

It should be actually possible to do the zoom steps while moving the fingers... I'll try to do some more improvements, but the only communication path, I'll use, are the two buttons that I'll remote-control. This way my code doesn't interfere with PDF.js.

[prohtex]

BTW: There is not a single line of jQuery in my code. This is raw JavaScript.

I stand corrected. Hoping for a mature solution soon.

[MickL]

The way to accomplish this is by using css transformation while pinch-zoom. Also the movement of the fingers needs to be applied not just the zoom. Then on pinch-zoom-end you can reset css transformation and apply actual zoom and scroll to pdf.js.

P.S. Using jQuery inside a non-jQuery project already seems like a bad practice to me.

[AnReZa]

P.S. Using jQuery inside a non-jQuery project already seems like a bad practice to me.

Where does @M-Reimer use JQuery? As he already stated, his workaround does only use plain Javascript.

[prohtex]

Yeah.. my bad. Point being, this solution doesn't work well.

[M-Reimer]

Updated so the distance between fingers changes the zoom amount: https://github.com/M-Reimer/android-pdf-js/blob/master/patches/pdfjs-pinch-gestures.js It is not possible to zoom while moving the fingers as, for some reason, the actual zoom and redraw causes the touch event to somehow "end". Again: Better than not handling the gesture at all.

[AnReZa]

@M-Reimer Thank you very much for your work. At least, it's an improvement compared to the last version. Maybe someone finds a solution to make it redraw while zooming. Or it might be possible to temporarily zoom using css transformations and then redraw it eventually after the touch gesture ends.

[AnReZa]

@anvaka Looked into the case and it seems like there might be a rather simple solution. Unfortunately I currently don't have the time to test it, but maybe one wants to give it a try.

[jsprpalm]

I made a version based on @squallstar solution that also uses css transform durring the pinch move to give more user feedback. The rendering is only done on touchend. It's not perfect, there are some small issues with scroll positioning after rendering but maybe someone could use it as a start.

https://gist.github.com/jsprpalm/12217feab2f1acc14bd8e8508291619e

[ipartola]

Is there still no fix for this issue? I'd like to use pdf.js on mobile but without the ability to zoom it is mostly useless on smaller screens.

[MickL]

I made it work without the use of hammer.js but since it was for a customers project i cant share the code. I implemented pinch and doubletap and zoomed with css and on pinchend i zoomed pdf.js. Some elements require to set width/height and some can be transformed with css-transform. Also while zooming the scroll-watch of pdf.js viewer.js has to be prevented. Took me lot of time but it worked pretty well in the end.

[prohtex]

Is there still no fix for this issue? I'd like to use pdf.js on mobile but without the ability to zoom it is mostly useless on smaller screens.

Until a developer experienced with the pdf.js codebase steps to offer a solution, it will be up to each person who implements pdf.js to cobble something together. Doesn’t seem to be a big priority for this project.

Here’s a PR that could be integrated without too much difficulty:

https://github.com/box/box-content-preview/pull/567

[aidrouge]

https://gist.github.com/jsprpalm/12217feab2f1acc14bd8e8508291619e

@jsprpalm thank you works great needs a fix please someone help to fix

[larsneo]

@aidrouge https://gist.github.com/larsneo/bb75616e9426ae589f50e8c8411020f6

[M-Reimer]

@aidrouge https://gist.github.com/larsneo/bb75616e9426ae589f50e8c8411020f6

I've added this one to my PDF viewer addon. Seems to work pretty well. https://addons.mozilla.org/android/addon/android-pdf-js/

[prohtex]

Edit: works for me

[msvargas]

For me working more natural setting this:

<meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=10.0, minimum-scale=1.0"
    />

[KazysNoobiys]

How do I set the minimum zoom? I can reduce the image so much that it turns into a dot.

[vniehues]

I have the same question as @KazysNoobiys. minimum-scale on the viewport doesn't affect the zooming

[bradporter]

I'm working on another work around: a transparent css layer overlaying pdf.js to handle various swipe functionality. The overlay portion works now, but I don't know what functions to call. if(swipe=='left') ???? What function would I call in order to advance to the next page or backup to the previous page or zoom?

[WeiFei365]

save your time & life, edit your .html file like this

// delete the 'maximum-scale'
<meta name="viewport" content="width=device-width, initial-scale=1">

eg. https://github.com/mozilla/pdf.js/blob/master/web/viewer.html#L26

[438198602]

https://github.com/manuelstofer/pinchzoom is good

[cepm-nate]

I'm designing for Android and iOS. Several people mentioned modifying the meta tag in the viewer.html file to something like this:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10.0, minimum-scale=1.0" />

On Android, this does not seem to have any effect. Pinching does nothing on the PDFs in the viewer. Has anyone successfully used the native zooming on Android within the stock viewer.html? (I was able to get it working by appending javascript as mentioned above, but am curious about a strictly native approach)

[adam-abdulaev]

I'm designing for Android and iOS. Several people mentioned modifying the meta tag in the viewer.html file to something like this:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10.0, minimum-scale=1.0" />

On Android, this does not seem to have any effect. Pinching does nothing on the PDFs in the viewer. Has anyone successfully used the native zooming on Android within the stock viewer.html? (I was able to get it working by appending javascript as mentioned above, but am curious about a strictly native approach)

Hello. Have you had any success with this task?

[kikuchy]

Sorry but is there any progress?

[angelaki]

Any news on this? Isn't this a super desired feature? Scrolling on desktop using Ctrl+Mousewheel is so super smooth, why not just offer this behavior for pinching?