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

Use more natural zooming on mobile #2582

Open
snorp opened this issue Jan 18, 2013 · 98 comments
Open

Use more natural zooming on mobile #2582

snorp opened this issue Jan 18, 2013 · 98 comments

Comments

@snorp
Copy link

@snorp snorp commented Jan 18, 2013

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.

@brendandahl
Copy link
Contributor

@brendandahl brendandahl commented Jan 18, 2013

This is what we wanted to do, but for V1 the pinch to zoom was having issues so we had to use the zoom buttons.

@snorp
Copy link
Author

@snorp snorp commented Jan 18, 2013

Can you elaborate on the issues? I think we could probably prioritize those for you in order to get PDF.js working well.

@wesj
Copy link

@wesj wesj commented Feb 4, 2013

I really don't think you want the browser to do the zooming in this case. If pdf.js renders a document at 800x600, and you pinch zoom in, the browser is just going to continue to render that 800x600 content at a new higher resolution which may or may not look like crap depending on the resolution of the device and how much you've zoomed. (I assume pdf.js still uses canvas for rendering and not svg?)

@brendandahl
Copy link
Contributor

@brendandahl brendandahl commented Sep 17, 2013

@Snuffleupagus @timvandermeij Are either of you interested in working on this? It seems it shouldn't be too hard using the shared library in gaia https://github.com/mozilla-b2g/gaia/blob/master/shared/js/gesture_detector.js

@timvandermeij
Copy link
Contributor

@timvandermeij timvandermeij commented Sep 17, 2013

@brendandahl I'll definitely put it on my to-do list and start experimenting with it soon. https://github.com/mozilla-b2g/gaia/blob/862de8489b648a9af7e8a5b88be031b5479404ba/apps/camera/js/panzoom.js#L15 seems to have a good example, as 'transform' is used for 2-finger pinch events. It would be really great if pinch to zoom would work, as it's used quite often on mobile.

@timvandermeij
Copy link
Contributor

@timvandermeij timvandermeij commented Sep 17, 2013

I'm working on this. Interested users can keep an eye on https://github.com/timvandermeij/pdf.js/tree/pinch-to-zoom for the progress. It is already catching the pinch-to-zoom command on my tablet and phone, but the accuracy must be improved, as well as the actual re-rendering (I'll need to find a way to calculate the new scale with the old scale and the new middle point, or some other way).

@brendandahl
Copy link
Contributor

@brendandahl brendandahl commented Sep 17, 2013

@timvandermeij One thing we may need to do before we implement this is improve the zoom. We've talked about first just using css transforms to to scale the canvas, then start re-rendering and then once re-rendering is done show the new canvas.

@timvandermeij timvandermeij mentioned this issue Sep 18, 2013
5 tasks
@snorp
Copy link
Author

@snorp snorp commented Sep 19, 2013

I strongly believe the best solution here is going to be one that relies on the browser's compositor to do the transient zoom (the animation during the pinch or double tap) and then just let pdf.js redraw at the new resolution. The sad part here is that right now content is oblivious to zoom changes, and I don't think resizing the canvas to the new resolution will work. We may need to enhance the canvas spec to handle this.

@skruse
Copy link
Contributor

@skruse skruse commented Dec 11, 2013

I had some success with hammer.js. I allowed the "native" pinch of the browser (which leads to blurry PDF) and upon pinchend I redraw the PDF canvas, with scale = scale*zoom and give the canvas the css "transform: scale(1/zoom)". So all will be in the same place (especially text and anchors). Looks neat.

@timvandermeij
Copy link
Contributor

@timvandermeij timvandermeij commented Dec 11, 2013

@skruse I prepared a patch for implementing pinch to zoom a while ago (see #3708), also with Hammer.js, but I have not yet succeeded in getting it to work properly on mobile/tablet devices. The pinch motions caused a lot of performance and stability problems. Do you mind sharing your implementation with us? If not, could you create a pull request with your pinch to zoom implementation? Perhaps it could replace mine if it works more fluently on mobile/tablet devices. :)

@rodoabad
Copy link

@rodoabad rodoabad commented Dec 19, 2013

Hey skruse, how were you able to calculate the zoom ratio at end of zoom?

@skruse
Copy link
Contributor

@skruse skruse commented Dec 19, 2013

var zoom = document.documentElement.clientWidth / window.innerWidth;

And I got performance issues too: One should not zoom in "too far" on a mobile device, in terms of the "scale" parameter. I guess 2 or 3 is the very maximum.

@sasikanth513
Copy link

@sasikanth513 sasikanth513 commented Sep 7, 2015

+2 for this

@MickL
Copy link

@MickL MickL commented Nov 19, 2015

Someone got a solution for this 2 year old issue?

@timvandermeij
Copy link
Contributor

@timvandermeij timvandermeij commented Nov 19, 2015

Nothing has been done about this as far as I know. I refer to my previous comment in #2582 (comment). We invite anyone to submit a PR for this once there is working code.

@rorysmorris
Copy link

@rorysmorris rorysmorris commented Mar 10, 2016

Would love to see a solution for this. At the moment this is the only thing that is stopping me from using pdf.js

:(

@Manmade
Copy link

@Manmade Manmade commented Mar 20, 2016

Pinch zoom would be great! I found this jquery plugin that uses pdf.js and has pinch zoom and swiping pages. http://touchpdf.net/demo/index.htm But it would be good if it was build in pdf.js from the start :-)

@ltullman
Copy link

@ltullman ltullman commented Aug 4, 2016

+1 Would love to see this here.

@M-Reimer
Copy link

@M-Reimer M-Reimer commented Apr 27, 2019

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
Copy link

@AnReZa AnReZa commented May 7, 2019

@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
Copy link

@AnReZa AnReZa commented May 15, 2019

@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
Copy link

@jsprpalm jsprpalm commented May 23, 2019

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
Copy link

@ipartola ipartola commented Oct 8, 2019

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
Copy link

@MickL MickL commented Oct 8, 2019

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
Copy link

@prohtex prohtex commented Oct 8, 2019

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:

box/box-content-preview#567

@aidrouge
Copy link

@aidrouge aidrouge commented Oct 8, 2019

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

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

@larsneo
Copy link

@larsneo larsneo commented Nov 8, 2019

@M-Reimer
Copy link

@M-Reimer M-Reimer commented Nov 10, 2019

@prohtex
Copy link

@prohtex prohtex commented Nov 10, 2019

Edit: works for me

@msvargas
Copy link

@msvargas msvargas commented Dec 17, 2019

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
Copy link

@KazysNoobiys KazysNoobiys commented Jan 29, 2020

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

@mozilla mozilla deleted a comment from youngAe May 18, 2020
@vniehues
Copy link

@vniehues vniehues commented Jul 29, 2020

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

@bradporter
Copy link

@bradporter bradporter commented Oct 12, 2020

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
Copy link

@WeiFei365 WeiFei365 commented Oct 19, 2020

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
Copy link

@438198602 438198602 commented Feb 5, 2021

@cepm-nate
Copy link

@cepm-nate cepm-nate commented Apr 13, 2021

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)

@adamabdulaev

This comment was marked as off-topic.

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

Successfully merging a pull request may close this issue.

None yet