Mobile Chrome crash on Pinch and Zoom > 200% ( Android 13,built in Web View but latest Chrome as well) #2568
Comments
|
I don't own an Android device, let alone Android 13, so there's little I can do. However, does this bug occur on https://mozilla.github.io/pdf.js/web/viewer.html or https://mozilla.github.io/pdf.js/legacy/web/viewer.html? If so, it's a bug of the base library, and you can forward it to the pdf.js team. |
stephanrauh
added
bug
|
On both https://mozilla.github.io/pdf.js/web/viewer.html and https://mozilla.github.io/pdf.js/legacy/web/viewer.html it is working fine. But as already said we can reproduce problem on most of Android 13 devices and some of Android 14 (mostly low level) on https://pdfviewer.net/extended-pdf-viewer/simple. Steps to reproduce:
I am pretty sure there is some kind of memory leak. Thank you for all your hard work and making our life with Angular and PDF.js much easier. |
|
I can confirm that we also experience this problem on both Android and iOS. It will happen when we zoom a lot on the PDF: ex, on construction plans, they are really zoomed-out and to be able to see any detail, the user must pinch to zoom it, more than 200%. Example PDF file: https://vancouver.ca/files/cov/sample-drawing-package-1and2family.pdf I have noticed that, while pinch-zooming, the screen will tear and freeze. |
|
Phew. First of all, sorry for answering late. It's because I'm ill. However, I still don't know how to solve the issue. I understand there's a difference between my fork of pdf.js and the original that causes crashes. But how to solve that? As I've mentioned earlier, I don't own an Android device, so I'm at a loss. @raphjutras I do own an iOS device, so maybe I can debug the problem, but it's still a major challenge. Can I talk you into helping me? Does the debugger or the console show anything useful? |
|
@stephanrauh I have made a simple test with original pdf.js in my Safari browser (iPhone) by accessing PDF.js official demo: It seem that the original script suffer from same tearing bug when pinch-zooming a lot. I havent had the chance to look at debuger/console. |
|
Just did a research on PDF.js github, looks like the issue had already been flagged..! |
Get well soon. Wishing you a speedy recovery. This bug is not so important. |
|
@raphjutras Are your referring to this workaround? .pdfViewer .canvasWrapper,
.pdfViewer .page canvas[zooming] {
width: inherit !important;
} |
|
@stephanrauh Yes, I will definitely need to give this a try! |
I think this might be two separate/different bugs.. Tearing is something, app crashing is something else hehe |
|
Yes, you're right. I hoped it might be the same bug, but it was a wild shot. |
|
What about version 22.0.0? Currently, that's an alpha version, but it's running on a new version of pdf.js. Maybe that solves the issue? |
|
Hello @stephanrauh, I have installed 21.4.6 and I still encouter problems when zomming a lot. It successfully installs it, I can see the changes in node_modules folder, however I am unable to build my Angular app after that, it will hrow a lot of errors (about my own components? I don't know why) and the last error is: So I can't really test v22.0.0 on browser or mobile. |
Same. :( Base library does not have this problem but is missing nice Angular integration. |
|
I still don't know how to reproduce and find the bug. Does it require Android 13? Thing is, I don't own an Android device. |
|
If you visit https://pdfviewer.net/extended-pdf-viewer/simple with Chrome on a mid-range phone (regardless of the Android version) or Safari on an iPhone and try zooming in and out several times using the pinch gesture, it should crash or freeze. It might be possible to reproduce this using Chrome Dev Tools, but we did not succeed, most likely because the desktop is much more powerful. |
|
We're getting closer. I've tested pinching and zooming on my iPad for several minutes. I didn't ovserve a crash, but the rendering time went up tremendously. I also suspect that it's not necessary to use touch gestures. Modifiying the zoom setting repeatedly does the trick just as well. |
|
I'm having what seems to be the same issue in ionic capacitor. It works and displays the PDF, but then when I pinch zoom a few times it crashes. here is the console from android studio running on a real device (Samsung A53) - not sure if this will help. Also do you think going to a previous version would fix this issue? 2025-01-21 20:28:23.790 5767-5767 Capacitor/Console io.ionic.i4m.myfieldwise E File: https://localhost/3581.1979fc5e688587d8.js - Line 1 - Msg: TypeError: Cannot read properties of undefined (reading 'rotation') |
|
@timvandermeij Does this ring a bell? I've got some reports that the PDF viewer (more to the point: my fork of it) crashes when pinching on certain Android devices. I'm pretty sure the relevant code is identical on pdf.js and on my fork. The latest report is interesting. It's a long stack trace containing many repetitions, all at the same line of code: "Cannot read properties of undefined (reading 'rotation')". Any ideas? |
|
I sometimes also get the error 'parentOffset not set, cannot scroll' or something along those lines, but scrolling does work. |
|
@joelutting Are you initializing the PDF viewer in a hidden div, tab or modal? Usually that doomed to fail, but sometimes it causes the error message you've mention. A missing or incorrect position on the parent container can also cause offsetParent to fail. |
|
@joelutting You may want to update to version 22.3.0. I've optimized a few things, so now the library uses slightly less resources and avoids the "offsetParent not set" message. |
I don't recall having seen reports about this exact issue before, but in general performance on mobile devices might be a bit suboptimal compared to desktop devices given the usually more limited resources. However, it should never crash the browser. It could be a memory leak for example because pinch-zooming can cause quite a lot of rendering operations to happen in series, and while there should be thresholds in place to prevent unnecessary re-rendering I could imagine that that part could be buggy/missing here. For the issue to be actionable for PDF.js it would be necessary to reproduce it with the default viewer at https://mozilla.github.io/pdf.js/web/viewer.html. If it also reproduces there then it's at least clearer that it's a bug in PDF.js itself rather than in one of the forks, and it makes it easier to debug for us (because in general we don't really know what forks changed, and we have seen cases of forks e.g. using libraries that break PDF.js in "interesting" ways, so that's why we usually ask for a reproducer outside of the fork). By the way, there is some work going on in mozilla/pdf.js#19128, mozilla/pdf.js#19043 and mozilla/pdf.js#6419 for which the idea is that it'll not only improve rendering quality but also performance on mobile devices. It's in early stages so it's not done yet, but the general performance for mobile devices is being looked at. |
|
@joelutting The "reading rotation" bit indicates it might be my bug. Can you set the attribute |
|
@timvandermeij Don't worry, I don't expect you to debug a fork of your library. I tried to avoid interesting changes, if only I need to wrap my head around my own changes two months later. :) Even so, you're absolutely right. You're already helping me a lot! |
|
@stephanrauh thanks for looking into this! here is how I have it setup currently, its in a div within the main ion-content block. Close
this is one a several divs within the each of which is a different main view in the app. I updated to the latest so package.json shows; "ngx-extended-pdf-viewer": "^22.3.0", Here is the stack trace from android studio running it on the device - a samsung galaxy A53. I look at the document - looks great. I pinch zoom in a little, and then a little more and the pdf view goes white. I pinch zoom out slightly and the app crashes. ViewPostIme pointer 0 |
|
@stephanrauh I put the html in the above comment but it seems to have been stripper out...I'll try again here; <div class="fw-pdf-view" [hidden]="!(MainView==2)">
<div class="fw-pdf-view-doc">
<ngx-extended-pdf-viewer #pdfViewerAutoLoad (pdfLoaded)="onPDFLoaded($event)" [minifiedJSLibraries]="false"
[zoom]="'page-fit'" [src]="pdfData" [height]="'100%'" [textLayer]="true"
[showHandToolButton]="true" [mobileFriendlyZoom]="'true'" [minZoom]="0.5" [maxZoom]="1.5"></ngx-extended-pdf-viewer>
</div>
<div class="fw-pdf-view-header">
<div class="fw-pdf-view-close" (click)="closePDF()">Close</div>
</div>
</div> |
|
I'm afraid all I can see is an "OOM", which probably means out-of-memory exception. The message "Cannot read properties of undefined (reading 'rotation')" is also there, but at an unlikely place: https://localhost/polyfills.c3a9e4b87df5be46.js. Try as I might, I cannot guess why a rotation flag is read in a polyfill, so I think some compiler magic is still obfuscating the code. In other words: I don't have a clue, and I don't know how to proceed. |
|
@stephanrauh thats too bad - not sure what I can do to get better info for you. For me to proceed I guess I'll try using an earlier version(?) |
|
@stephanrauh I tried the most recent one you released and then I tried 21.4.6 and both got the same problem. There must be something else going on, maybe with ionic/capacitor - do you know if people have used this with ionic before? |
|
@stephanrauh is there any way I can turn off pinch zoom? |
|
@stephanrauh I don't know if I am missing something - I cannot find out how to turn off pinch zoom. Also it seems to crash when it zooms too far, but I can't seem to get minZoom/maxZoom to work to limit max zoom in(?) is that the right thing to use. Also more info - the crash actually happens before the log I posted above, it just takes a few seconds to actually crash.
File: https://localhost/9590.69d6b526f22a9006.js - Line 1 - Msg: >>>>> load file |
|
Well, maxZoom should work. I think there's also an option to limit the maximum canvas size - and that might be the root problem, maybe I've increased it to aggressively. I'll have a look after work. |
|
Try reducing constructor() {
pdfDefaultOptions.maxCanvasPixels = 5242880; // 5 Megapixel
}5 megapixels is only a suggestion - I suppose you'll want to experiment with smaller or maybe even higher numbers. |
|
I've also tested the pinch gesture on iOS. |
|
We're also seeing this crashing within our app on iOS. I can see "Canvas area exceeds the maximum limit (width * height > 67108864)." in the console so likely it's as you expect @stephanrauh. Interestingly we get better performance on an older version of this library ( Many of our clients have detailed drawings that they need to be able to zoom into, so limiting the zoom level isn't a solution for us. In the short term, we will stick with 22.2.0. |
|
@stephanrauh works!!! for those that have the same problem, adding this one line fixed it all. Zoom in and out and scroll around heaps on multiple docs and ran the app several times doing this - did everything I could to break it but it worked prefectly! Thanks so much for your help!
|
|
So I guess I should make that the default for iOS and Android. By the way, here's a list of resolutions supported by the browsers. Probably you can go a lot higher than 5 megapixels: |
|
@stephanrauh thanks - I was actually able to zoom in a long way, with a word taking up the whole screen - it seemed fast and clear. Also I have not been able to limit the zoom though - I set minZoom to 0.9 and maxZoom to 1.1 but it did not stop zooming in or out at all. Not so important now it works though, just FYI. |
stephanrauh
added
Solved
and removed
I'd like to help but it's difficult
|
Things are getting interesting. I had a long discussion with my good friend ChatGPT, and it told me these are canvas sizes with a decent safety margin: 
I ran a few tests, and I reckon I should heed this advice. It's less aggressive than my previous approach, which may hurt a few use-cases, but I think using the function below as a default is safe. By the way, I ran a few plagiarism checks because the function it's hard to believe the function is not in the training data of ChatGPT. Until now, I didn't find anything. Before adding it to the library, I'll run a second check, just to be sure. function getSafeCanvasSize(): number {
// Create a temporary WebGL context
const canvas = document.createElement("canvas");
const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
const maxTextureSize = gl ? gl.getParameter(gl.MAX_TEXTURE_SIZE) : 4096; // Default to 4096 if unknown
// Get available device RAM (in MB)
function getAvailableMemoryMB(): number {
if (navigator.deviceMemory) {
return navigator.deviceMemory * 1024; // Convert GB to MB
}
if (window.performance && window.performance.memory) {
return window.performance.memory.jsHeapSizeLimit / 1024 / 1024; // Only works on Chrome
}
return 4096; // Default to 4GB if unknown
}
const availableMemoryMB = getAvailableMemoryMB();
// Conservative formula: Scale by square root of available memory
let estimatedSafeSize = Math.floor(Math.sqrt((availableMemoryMB * 1024 * 1024) / 6));
// Apply platform-specific limits
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
const isMobile = /Android|iPhone|iPad|iPod/.test(navigator.userAgent);
const isHighEndDesktop = availableMemoryMB > 12000; // Assume high-end desktops have >12GB RAM
if (isIOS) {
estimatedSafeSize = Math.min(estimatedSafeSize, 4096); // iOS Safari memory limits
} else if (isMobile) {
estimatedSafeSize = Math.min(estimatedSafeSize, 4096); // Most mobile devices
} else if (isHighEndDesktop) {
estimatedSafeSize = Math.min(estimatedSafeSize, 8192); // Allow larger sizes for desktops
} else {
estimatedSafeSize = Math.min(estimatedSafeSize, 6000); // Mid-range desktops
}
// Final limit based on GPU and estimated memory safety
return Math.min(maxTextureSize, estimatedSafeSize);
} |
|
@stephanrauh I can confirm that the minZoom and maxZoom works correctly now - in trying to fix other problems I had added those variables the wrong way (I used round braces instead of square ones!) - after changing that they work now. Just FYI - my bad. |
|
I've reduced the default maximum resolution in version 23.0.0-alpha.0. You can still go to the max by setting Enjoy! |
and others
Hi,
we found one issue with Pinch and Zoom on the mobile Chrome and Android 13.
We can reproduce even with https://pdfviewer.net/extended-pdf-viewer/simple. Just try to zoom and it will crash.
We can not reproduce on Firefox Android or any browser on Android 14. As well https://mozilla.github.io/pdf.js/web/viewer.html works on Android 13 and does not crash.
All latest updates are installed on Android 13 device.
Version info
Demo PDF file
Any .pdf file
Thank you and best regards.
The text was updated successfully, but these errors were encountered: