i have a php page which shows a list of invoices. clicking on any of those invoices shows its pdf file. When the user clicks on any invoice, the src of the embed tag is changed by jQuery to the appropriate pdf file.

Works very well, but strangely enough it behaves differently in safari then in firefox for instance.

In firefox i can just click on an invoice -> the pdf shows. if i right after that click on another invoice and after that click on the first invoice again -> the pdf shows again.

Safari: If i re-click an invoice, i get a blank pdf (embed tag). And downloading of that pdf results in a 0kb file.

Seems to only happen in safari.

Has anyone encountered this before and maybe know a solution to this issue? i have googled and tried a lot but it's still not working.

Html:
     <div class="card-body">
           <embed id="invoice_scan" src="" type="application/pdf" width="100%" height="400px" />
     </div>


jQuery:
     $('#invoice_scan').attr('src', '/docs/pdf_file1.pdf );

i have a php page which shows a list of invoices. clicking on any of those invoices shows its pdf file. When the user clicks on any invoice, the src of the embed tag is changed by jQuery to the appropriate pdf file.

Works very well, but strangely enough it behaves differently in safari then in firefox for instance.

In firefox i can just click on an invoice -> the pdf shows. if i right after that click on another invoice and after that click on the first invoice again -> the pdf shows again.

Safari: If i re-click an invoice, i get a blank pdf (embed tag). And downloading of that pdf results in a 0kb file.

Seems to only happen in safari.

Has anyone encountered this before and maybe know a solution to this issue? i have googled and tried a lot but it's still not working.

Html:
     <div class="card-body">
           <embed id="invoice_scan" src="" type="application/pdf" width="100%" height="400px" />
     </div>


jQuery:
     $('#invoice_scan').attr('src', '/docs/pdf_file1.pdf );

• javascript
• html
• jquery
• pdf
• safari

• There's very little code in your question. Not enough to see how it would actually work together with the processing of the click event. You could try an <iframe> instead of an <embed>. – KIKO Software Commented May 10, 2022 at 8:54
• Thx for thinking with me. I would gladly share more if i know what you need. Simplified it's a jQuery click handler which changes the src of the embed and does $('#invoice_scan').show(). That's about it... And i tried both iframe and object, the result is the same :-( – Dave33 Commented May 10, 2022 at 9:09
• Thanks K J. The problem is that safari (and only safari, it seems) displays the pdf inside an embed tag (or object, or iframe) well the first time for a filename that i hasn't displayed before since the window was first opened, but not the second or third time. So, if filename 'invoiceABC1' was show (fine) and i would open another file 'invoiceABC2' things are fine. But without refereshing the page, trying to show the first invoice (invoiceABC1) again results in a blank embed/object/iframe. Firefox works fine, only safari has this weird behaviour. now how to fix it .... – Dave33 Commented May 11, 2022 at 10:52

4 Answers 4

I had this issue showing a pdf in an object tag using angular. The fix was to remove type="application/pdf" from the object tag.

I have a similar issue with Safari 15.5 with <object> tag. As soon as PDF gets loaded, it was crashing the browser. I removed type="application\pdf" conditionally for safari. That seems to be working.

Alternate option would be use iFrame for PDF's.

Why is this code failing on MacOS Big Sur Safari?

even using <iframe /> won't solve the problem for Safari but this will:

Adobe's open source PDF Embed API solves these issues for Safari, check out PDF Embed API docs to know more

check out PDF Embed API samples to start using the library
React.js: check out PDF Embed API React samples

Don't forget to add <script /> tag from index.html file into your code

<script type="text/javascript" src="https://acrobatservices.adobe./view-sdk/viewer.js"></script>

I had a similar issue on Safari, but removing the type="application/pdf" attribute didn't fix it. I have a suspicion that it is related to some caching issue.

I ended up adding a random query string to the end of my file url each time it was pressed so that it would be fetched as a different file everytime. It does feel like a very hacky and roundabout solution and might not always be practical though.