javascript - Why is this code failing on MacOS Big Sur Safari?

Question

I'm trying to get PDF previews using the PDF browser extension to work on MacOS Big Sur Safari.

We have a .NET framework web api returning file data. The file data is retrieved using the following function.

export class AttachmentService {
    constructor(
        private readonly api: ApiClient
    ) { }

    public getAttachmentContentObjectUrl(identifier: string): Observable<string> {
        return this.api.getFileData(identifier, null)
            .pipe(
                switchMap((file) => {
                    return of(window.URL.createObjectURL(file.data));
                })
            );
    }
}

We call this function as follows:

export class PdfPreviewComponent implements OnInit {
    constructor(
        private readonly attachmentService: AttachmentService,
        private readonly domSanitizer: DomSanitizer
    ) {
    }

    public ngOnInit() {
        this.setPreviewPdfSrc(<some arbitrary id>);
    }

    private setPreviewPdfSrc(identifier: string) {
        let observable = this.attachmentService.getAttachmentContentObjectUrl(identifier);

        observable
            .subscribe(
                url => this.previewSrc = this.domSanitizer.bypassSecurityTrustResourceUrl(url),
                () => this.previewSrc = null);
    }
}

We then use the previewSrc variable in an object element to load the browser PDF extension.

<object id="preview" type="application/pdf" [data]="previewSrc">

However, when this is done on MacOS Big Sur Safari 14, this code fails and hangs the browser.

Before the MacOS Big Sur update everything worked well. Tested on Big Sur 11.0, 11.0.1 and 11.1. All fail. When running it inside Chrome or Safari on the same Big Sur versions, it works as it should. No problems on other OS's / browsers.

Is this a bug in MacOS Big Sur or am I doing something wrong? I tried parsing the userAgent string to circumvent this issue, but Big Sur 11.0.1 returns 10.15.6 Catalina...

Answer 1

I had the same problem unfortunately. This doesn't seem to happen when using an iframe instead of an object element though, so I used that as a workaround.

<iframe [src]="previewSrc"></iframe>

EDIT: After some more digging, i noticed the problem only occurs when adding the type="application/pdf" attribute. Removing that attribute also seems to fix the issue.

Why this happens, is still unclear for me.

<object id="preview" [data]="previewSrc">

I have created an issue in the Angular repo for this, but I'm not sure if this is Angular specific or a Safari bug.