PDF Embeds: file loads incorrectly on iOS

[liviopv]

Steps to reproduce the behavior

1. Embed a PDF file on a post or page https://wordpress.com/support/embedding-a-pdf-file/
2. Open the page/post on an iOS device

What I expected to happen

The PDF should load as an embed as it does on desktop, or it should load as a downloadable link like on Android

What actually happened

The file displays only the first page of the PDF, with no option to scroll on multi-page files. The content of the PDF is displayed against the site's background, ignoring the PDF's background.

Screenshot: https://d.pr/i/N8UjSV

Pages:

• Simple: P6VVUQ-Ba-p2
• Atomic: https://atlivio.wpcomstaging.com/pdf/

Browser / OS version

Tested on an iPad Air 4 running iOS 14.4. Chrome and Safari apps in their latest versions.

Is this specific to the applied theme? Which one?

All themes

Does this happen on simple or atomic sites or both?

Both

Level of impact

Medium. It handles PDF embeds (not common) unusable on an entire operating system (very common).

Reproducibility

Consistent

[rw-ye]

Customer report of this issue here: 4451703-zd-woothemes

[Robertght]

Still an issue.
I tested with on a iPad Pro with iOS 15, Chrome and Safari.

[brookewp]

Another report here: hc-32877576

[thekingsprojects]

Another here: 4555202-zen

[sejas]

I've been testing the issue. Here are my findings.
The issue comes from WPcore/Gutenberg and the current limitations to rendering PDF previews on mobile devices.

There is a reported issue on Apple's Developer Forum about this limitation on iOS.
https://developer.apple.com/forums/thread/649982
I've tried using only the slashes without https:, and the problem persists.

Testing on Android, I can see an empty space instead of the PDF preview or the first-page image.

I've also found this interesting conversation in the original PR:

• File Block: Add support for embedding PDFs WordPress/gutenberg#24233 (comment) wich suggests a workaround hiding the preview for specific user agents WordPress/gutenberg@1c40e28

Screenshots

iOS	Android

The Preview can be disabled, showing only the "download" buttons.

I've created this issue on Gutenberg's repo: WordPress/gutenberg#46382

@liviopv, is it ok to close this issue in favor of the new one on Gutenberg?

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 4451703-zen
• 4555202-zen

[liviopv]

@sejas yes, sounds like a good option! Closing for now.