PDF not loading on iPhone 11 v14

[diegoasiqueira]

Check this first
The project is a wrapper around Mozilla's PDF viewer, so maybe your bug is caused by the base library. Please check this first by answering these three questions:

• Does the bug also happen on https://mozilla.github.io/pdf.js/web/viewer.html? (If so, please open the issue at Mozilla's bugtracker).
• Does the bug also happen on https://pdfviewer.net/simple?
• Can you write a reproducer based on this template project? https://github.com/stephanrauh/ngx-extended-pdf-viewer-issues/tree/main/template

Describe the bug
PDF not showing when using iPhone 11 v14 (Safari and Chrome). During our tests using BrowserStack, it works in all iPhone versions except for iPhone 11 v14. I tested with the mozilla page as SS below.
https://mozilla.github.io/pdf.js/web/viewer.html

Version info

• Version 11

Desktop (please complete the following information):

• iOS

Smartphone (please complete the following information):

• Device: iPhone 11 v14

To Reproduce
Just try to load the mozilla page (https://mozilla.github.io/pdf.js/web/viewer.html) on iPhone 11 v14, you should see the gray frame, no pdf loaded as SS above.

Demo PDF file
Not needed, use mozilla page.

Screenshots
If applicable, add screenshots to help explain your problem.

#iPhone11 not working

#iPhone 11 Pro works

Additional context
N/A

Thank you!
I know from experience how much work filling a form like this is. It's always tedious and annoying. But it helps me to focus on the important points and to speed up development. So thank you very much for your understanding and your patience!

[stephanrauh]

I've managed to reproduce your issue in Browserstack. But I didn't see any clue what the problem is. It seems my trial account doesn't display the console window properly.

Probably you're better off. Would you mind to look up the console messages and to send them to me? I'm pretty sure there an exception or a syntax error.

Obrigado,
Stephan

[diegoasiqueira]

Sure. This is what I see on the console

Please, let me know in case of any other needed.

[stephanrauh]

OK, we're getting closer. I guess that's pretty much what @elvisgraho reports at #657 (comment).

As long as we're talking about https://mozilla.github.io/pdf.js/web/viewer.html, that's just the way it is. That web page assumes you're using to top-notch Firefox. https://mozilla.github.io/pdf.js/legacy/web/viewer.html should do the trick. But you've reported this at the ngx-extended-pdf-viewer forum, so I assume your real problem is that my Angular PDF viewer doesn't work.

And that's something I don't understand yet. Because that's exactly what my browser support check checks:

https://github.com/stephanrauh/ngx-extended-pdf-viewer/blob/main/projects/ngx-extended-pdf-viewer/assets/op-chaining-support.js

// This file provokes syntax errors if your browser doesn't support
// some new JavaScript standard. This allows ngx-extended-pdf-viewer
// to switch to the slow but reliable legacy builds.
const optionalChaining = {
  support: true,
};

// Does your browser support the logical assignment operators?
let x = false;
x ||= true;


// Does your browser doesn't support private fields?
class ClassWithPrivateField {
  #privateField;
}

window.supportsOptionalChaining = optionalChaining?.support;

If there's an error, you're gracefully redirected to the ES5 build. But this doesn't seem to work in your case.

I'm not sure it's possible, but maybe you can add a breakpoint to the op-chaining-support.js script and check whether there's an error or not. And send me a screenshot of your network traffic. Are the modern ES2020 files used, or does ngx-extended-pdf-viewer load the "legacy" ES5 files?

[diegoasiqueira]

It seems I can't, once source tab shows only the css and html files.
Trying to figure out a way to do it.

[diegoasiqueira]

Once I'm not able to debug, my ideia was to add those code or the part of the code you're interesting about it in a dummy page, then I could console.log the info and check it using BrowserStack.

This is the result using the page :
https://playcode.io/856204/

[stephanrauh]

Thanks a lot! Well, that's strange. I wonder if that particular iPhone supports only a subset of the .? operators.

I intend to run my own tests using Browserstack soon (after recovering from my cough). In the meantime, maybe you can add the attribute [minifiedJSLibraries]="false". This results in more useful stack traces. I'd like to know if the error occurs in this method:

[diegoasiqueira]

Hi, @stephanrauh
Any lucky on your side?
I was thinking to download the code, change the build to compile to ES5, generate the library and the install using this modified library in my project and test how it will behave on iPhone 11, but I also read on the other thread that you're implementing a way to control by a parameter if we'd like to use ES5, is that true?

[stephanrauh]

At the moment, I'm trying to implement another issue (Angular Schematics), and I'm stuck. So I didn't dedicate much time to your ticket. However, I need to hurry because my "life-term" Browserstack account expires in February. Weird definition of "life-term" :)

You don't have to compile the sources for ES5. I've already done that for you. All you need to do is to convince the browser to use them. There's a brute-force approach: overwrite the files pdf-*.js, pdf-worker-*.js, and viewer-*.js by their ES5 counterparts:

[diegoasiqueira]

@stephanrauh I can search the code, but maybe you know that in an easier way. Is there a flag on the code I could set to force the browser to use ES5? My ideia as a workaround is use ES5 as default on the library, do my tests on iPhone 11, if it works, keep it on this way until the final solution.

[stephanrauh]

Well... currently I'm wondering if I should add such a flag, specifically for you (and the countless developers who keep reporting ESNext problems to me). I'm 90% convinced I have to implement such a flag. But I'm hesitating, because setting this flag to true means mediocre performance for 95+% of your users. So I'd prefer to find a better solution. It's just that there seem to be so many different devices out there, each with their particular set of incompatibilities.

[bogdanconstantinescu]

Hi @stephanrauh, I'm also experiencing a similar issue, only not with the optional chaining, but with the class private fields. The issue has been reproducing on multiple devices (iPhone 7, 8, 11) with iOS 14.5+ (so higher or equal to 14.6 and less than 15).

I've tried 11.2.0, and 12.0.0-alpha.3 and they both have the same result. Since your code already handles iOS 13 and below, I think this mainly affects iOS 14 - I don't have the same issue with iOS 15.

My current list of iOS versions triggering this issue is the following: 14.6, 14.7.1, 14.8, 14.8.1.

This is the Sentry error report that I see for the users with the above iOS versions

And this is the #i found in the minified pdf-2.12.558.min.js

If you look closely, the "private field" is actually a private method (this.#i(i,e.annotationCanvasMap)), which based on the MDN is only available from iOS 15.

I think your current private field detection worked great in older versions, as I started having this issue when upgrading from 9.0.5 to 11.2.0-alpha.x after an Angular 12 to 13 upgrade.

Could this possibly be a fix to your op-chaining-support.js file?

// Does your browser doesn't support private fields?
class ClassWithPrivateField {
  #privateField;
  #testMethod() {
    return true;
  }

  constructor() {
    this.#testMethod();
  }
}
new ClassWithPrivateField();

[stephanrauh]

@bogdanconstantinescu Reading your report, I started to cry out for frustration, until I saw your detailed analysis. Awesome! Thank you very much. I guess you're right, I've missed a corner case.

BTW, debugging is a lot easier if you set [minifiedJSLibraries]="false".

You're probably right. I'm going to add your check. That's a good idea, and I'm positive it solves the issue!

Please apologize I'm not going to solve this today. The war - so close to our neighborhood! - is currently draining a lot of my mental energy. Doing open source feels pointless these days. But not doing open source doesn't help anybody, either, so I intend to solve this issue soon.

[bogdanconstantinescu]

@stephanrauh no worries, thank you for supporting open source and for your great library! 👍

I've created a patch and tested and it works perfectly fine, so I opened a PR with the changes.

[stephanrauh]

Now I know what I'm going to do this evening. :)

[stephanrauh]

Your bugfix has landed with version 12.0.0-alpha.4.

Enjoy!
Stephan

[SergioSuarezDev]

i continue having the same issue, not download file on iphone 13 :(

[stephanrauh]

@SergioSuarezDev ¿Cual versión de ngx-extended-viewer usas? ¿Puedes enviarme un stacktrace?

[SergioSuarezDev]

@SergioSuarezDev ¿Cual versión de ngx-extended-viewer usas? ¿Puedes enviarme un stacktrace?

Estoy usando la ultima versión, con Ionic y aparentemente cuando compila en iOS no se ve ningún error :(

[stephanrauh]

¿Que pasa en el navegador? ¿Has connectado tu movíl con tu ordenador para debugear y ver la consola de Safari? Alternativamente, puedes usar Browserstack o algo del estilo.

Cuando toco 'descargar' en mi iPad en mi showcase (https://pdfviewer.net), el PDF abre en el navegador. Supongo que es decir que function. ¿Que pasa en tu dispositivo? ¿Puedes enviarme un video?

[SergioSuarezDev]

Usando Ionic en el navegador funciona pero cuando compilo para iOS, deja de funcionar.

[stephanrauh]

¿Functiona sin Ionic? Al menos, el showcase funciona en Browserstack sin problema alguna. Cuando descargo el archivo, so abre.

Despues hagar click en "descargar":

[SergioSuarezDev]

Acabo de depurarlo con el xcode y el error es este:

⚡️ [warn] - Warning: Digital signatures validation is not supported
2022-12-10 19:44:34.277548+0100 App[17966:2576899] [default] Failed to open URL blob:capacitor://localhost/2cfa8fa7-443c-4712-96c5-0c23c955130a: Error Domain=NSOSStatusErrorDomain Code=-10814 "(null)" UserInfo={_LSLine=244, _LSFunction=-[_LSDOpenClient openURL:fileHandle:options:completionHandler:]}

Si hago debug en navegador funciona, pero abriendolo en ios con XCode, muestra este error. Es raro, porque el pdf es una URL a un fichero en internet, no es un blob.

[SergioSuarezDev]

Este es el codigo de mi pdf viewer:

<ngx-extended-pdf-viewer style="height: 85vh; width: 95%;" *ngIf="urlToOpen" [useBrowserLocale]="true"  
 [backgroundColor]="'#ffffff'" (pdfLoaded)="loadFinished()" (pdfLoadingFailed)="onError($event)" 
 [filenameForDownload]="filename" [showZoomButtons]="true" [zoom]="'page-fit'" [showToolbar]="true" 
 [src]="urlToOpen" [showFindButton]="false" [showBorders]="true" [showDownloadButton]="true" 
 [showOpenFileButton]="false" [enablePinchOnMobile]="true" [showPrintButton]="false" [showSidebarButton]="false" 
 [showPagingButtons]="false" [mobileFriendlyZoom]="true" [showRotateButton]="false" [showHandToolButton]="false" 
 [showPresentationModeButton]="false" [showSecondaryToolbarButton]="true" [showBookmarkButton]="false" 
 [showSpreadButton]="false" [showSpreadButton]="false" [showPropertiesButton]="false" [showScrollingButton]="false">
  </ngx-extended-pdf-viewer>

[stephanrauh]

Es raro de verdad. No creo que es un error de ngx-extended-pdf-viewer o pdf.js. Buscé por las mensajes en mi codigo fuente, y encontró nada. Tu codigo HTML tambien parace bien.

[SergioSuarezDev]

Parece un bug de Capacitor (capa nativa de Ionic):
ionic-team/capacitor#5478

Por el momento implementaré un boton de download propio

[stephanrauh]

Para implementarlo quizas puedes usar este idea:

      const PDFViewerApplication: IPDFViewerApplication = (window as any).PDFViewerApplication;
      PDFViewerApplication._ensureDownloadComplete();

      const file = await PDFViewerApplication.pdfDocument.saveDocument();
     // that's the file you're interested in

#1592 (comment)