Displaying a PDF in an Angular app on Safari

Last week, I encountered an intriguing bug while working with an Angular application that only occurred when using Safari. While the application successfully displayed a PDF in all other browsers, Safari presented an infinite spinner instead. Although the data was retrieved from our API and passed to the Angular app, Safari’s PDF preview window failed to open.The template file looked like this:

<div style="width: 100%; height: 90%">
  <object
    [data]="this.data.pdfData"
    type="application/pdf"
    width="100%"
    height="100%"
  ></object>
</div>

After a bunch of playing around I changed the template to this:

<div style="width: 100%; height: 90%">
  <object [data]="this.data.pdfData" width="100%" height="100%"></object>
</div>

Everything started functioning correctly in both Safari and other browsers. It remains unclear why Safari has an issue with the “application/pdf” type inside on object tag, but it does. Although it still functions as expected in other browsers, I decided to incorporate a UserAgent check. If the browser is identified as Safari, I exclude the type declaration altogether.