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 );