stephanrauh / ngx-extended-pdf-viewer

A full-blown PDF viewer for Angular 16, 17, and beyond
https://pdfviewer.net
Apache License 2.0
449 stars 167 forks source link

Safari - Version 17.5 (19618.2.12.11.6) - PDF document is not displayed when changing #2374

Closed plemens closed 4 days ago

plemens commented 1 week ago

Safari BUG: If you click back and forth between different PDFs in Safari, an error message appears and the document is not displayed.

You can also easily reproduce the error on the PDF Showcase page. https://pdfviewer.net/extended-pdf-viewer/book-mode Simply open the console log output and switch back and forth between the documents in DEMOS and manual. The following error message then appears in the console log.

[Warning] Hiding the "find" button because the text layer of the PDF file is not rendered. Use [textLayer]="true" to enable the find button. (main.39a8773231a879ff.js, line 1)
[Error] TypeError: null is not an object (evaluating 'P.eventBus.on')
    runTask (polyfills.cb63d087e4ed7d72.js:1:14808)
    invokeTask (polyfills.cb63d087e4ed7d72.js:1:20455)
[Error] TypeError: null is not an object (evaluating 'u.eventBus.on')
    runTask (polyfills.cb63d087e4ed7d72.js:1:14808)
    invokeTask (polyfills.cb63d087e4ed7d72.js:1:20455)
[Error] TypeError: null is not an object (evaluating 'window.PDFViewerApplication.eventBus.on')
    runTask (polyfills.cb63d087e4ed7d72.js:1:14808)
    invokeTask (polyfills.cb63d087e4ed7d72.js:1:20455)
[Warning] Hiding the "find" button because the text layer of the PDF file is not rendered. Use [textLayer]="true" to enable the find button. (main.39a8773231a879ff.js, line 1)
[Log] PDF 4dc91a1875a6d707aec203bb021c93a0 [1.3 Acrobat Distiller 4.0 for Windows / Microsoft Word 8.0] (PDF.js: 4.1.896 [99a19892a])  modified by ngx-extended-pdf-viewer 20.2.0 (main.39a8773231a879ff.js, line 1)
[Warning] The height of the PDF viewer widget is zero pixels. Please check the height attribute. Is there a syntax error? Or are you using a percentage with a CSS framework that doesn't support this? The height is adjusted automatedly. (main.39a8773231a879ff.js, line 1)
stephanrauh commented 1 week ago

I didn't expect the browsers to work so differently! I believe it's a timing issue. You can almost certainly work around this problem by opening the new instance of <ngx-extended-pdf-viewer> with a short delay. Start with 1 second, but I suppose 100 milliseconds should be enough, or maybe even less.

Nonetheless, it's a bug, and I should at least try to solve it. Just be aware it might be difficult. I'm reluctant to promise a solution right now because I might not be able to deliver it.

plemens commented 1 week ago

Thanks for the quick reply. The following workaround solves the problem in the Safari browser.

HTML:

 <ngx-extended-pdf-viewer *ngIf="showPdfViewer" ....

TS:

  ngOnInit() {
    setTimeout(() => {
      this.showPdfViewer = true;
    }, 250);
  }
stephanrauh commented 4 days ago

It was a lot of work - but finally, I've managed to puzzle it out. Version 20.5.0 fixes the problem.

plemens commented 3 days ago

Thank You :-)