Problems displaying PDF in iFrame on Mobile Safari

Within our web application we are displaying a PDF document in an iframe using the following line of code:

<iframe id="iframeContainer" src="https://example.com/pdfdoc.pdf" 
                             style="width:100%; height:500px;"></iframe>

This works fine in all the major desktop browsers with the width of the PDF scaling to fit inside the confines of the iFrame and a vertical scroll bar to view all the pages within the document.

At the moment however I can't get the PDF to display correctly in Mobile Safari. In this instance only the top left portion of the PDF is visible without any horizontal or vertical scrollbars to see the rest of the document.

Does anybody know of I workaround for this problem in Mobile Safari?

UPDATE - MARCH 2013

After hours of searching and experimentation I can conclude that this problem is a real mess!! There are a bunch of solutions but each far from perfect. Anybody else struggling with this one I advise to refer to 'Strategies for the iFrame on the iPad Problem'. For me I need to write this one off and look for another solution for our iPad users.

UPDATE - MAY 2015

Just a quick update on this question. Recently I have started using the Google Drive viewer, which has mostly solved the original problem. Just provide a full path to the PDF document and Google will return a HTML formatted interpretation of your PDF (don't forget to set embedded=true). e.g.

https://drive.google.com/viewerng/viewer?embedded=true&url=www.analysis.im%2Fuploads%2Fseminar%2Fpdf-sample.pdf

I'm using this as a fallback for smaller viewports and simply embedding the above link into my <iframe>.

Solution 1:

I found a new solution. As of iOS 8, mobile Safari renders the PDF as an image within an HTML document inside the frame. You can then adjust the width after the PDF loads:

<iframe id="theFrame" src="some.pdf" style="height:1000px; width:100%;"></iframe>
<script>
document.getElementById("theFrame").contentWindow.onload = function() {
    this.document.getElementsByTagName("img")[0].style.width="100%";
};
</script>

Solution 2:

try pdf.js should also work inside mobile safari: https://github.com/mozilla/pdf.js/

Solution 3:

My solution for this is to use google drive on mobile and a standard pdf embed in an iframe on larger screens.

.desktop-pdf {
    display: none;
}

.mobile-pdf {
    display: block;
}
@media only screen  and (min-width : 1025px) {

  .mobile-pdf {
      display: none;
  }

  .desktop-pdf {
      display: block;
  }
}

    <div class="outer-pdf" style="-webkit-overflow-scrolling: touch; overflow: auto;">
        <div class="pdf">
            <iframe class="desktop-pdf" scrolling="auto" src="URL HERE" width="100%" height="90%" type='application/pdf' title="Title">
                <p style="font-size: 110%;"><em>There is content being displayed here that your browser doesn't support.</em> <a href="URL HERE" target="_blank"> Please click here to attempt to view the information in a separate browser window. </a> Thanks for your patience!</p>
            </iframe>
            <iframe class="mobile-pdf" scrolling="auto" src="https://drive.google.com/viewerng/viewer?embedded=true&url=URL HERE" width="100%" height="90%" type='application/pdf' title="Title">
                <p style="font-size: 110%;"><em>There is content being displayed here that your browser doesn't support.</em> <a href="URL HERE" target="_blank"> Please click here to attempt to view the information in a separate browser window. </a> Thanks for your patience!</p>
            </iframe>
        </div>
    </div>