Viewer black on android mobile iframe

Technical Support
1

Hi,

I’m facing a problem with viewer on android mobile view, the viewer works perfectly with the desktop mode (windows, android and IOS), but the pdf is not loading when using android mobile ( i havn’t test with ios mobile since i don’t have an iphone right now).

GIF-220330_175333

You can see with the gif that the viewer works when using desktop view, and that on mobile, only the left panel show the pdf.

The issue does not come from chrome since the demo here How to Embed a PDF in an HTML Website | PDF.js Express works perfectly. I’m guessing that i’m misssing something. I’m not good with java script and i had trouble finding documentation on the website talking about iframe.

Thank you very much for you help

Here is my code for the viewer

    <div class="col-md-6">
        <div class="card">
            <div class="card-body">
                <!-- Errors out -->
                <div id='labo' style='height: 75vh; width: 100% ;'></div>
            </div>
        </div>
    </div>
3

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

4

Here is the gif with desktop view

ezgif.com-gif-maker

6

Here the script

    WebViewer({
            path: 'plugins/pdf-js/lib', // path to the PDF.js Express'lib' folder on your server
            licenseKey: 'key',
            initialDoc: 'mypdf.pdf',
            // initialDoc: '/path/to/my/file.pdf',  // You can also use documents on your server
        }, document.getElementById('labo'))
        .then(instance => {
            // now you can access APIs through the WebViewer instance
            const {
                Core,
                UI
            } = instance;

            // adding an event listener for when a document is loaded
            Core.documentViewer.addEventListener('documentLoaded', () => {
                console.log('document loaded');
            });

            // adding an event listener for when the page number has changed
            Core.documentViewer.addEventListener('pageNumberUpdated', (pageNumber) => {
                console.log(`Page number is: ${pageNumber}`);
            });
        });
7

Hey there!

Couple questions for you:

  • Do you see any errors in the console?
  • Does the document show up if you zoom in/out?
  • Does the document show up if you wait a few seconds?

Thanks,
Logan