Can’t scroll PDF inside an iframe on an iPhone/iPad

As well-designed iPhones and iPads are, even they can still have the occasional bug. I came across an iPhone/iPad bug that had to do with viewing a PDF inside an iframe. It didn’t seem to matter if viewing the PDF on Safari or an other mobile browser. The PDF would load into an iframe, however it would not be scrollable. I came across this bug while working with a client. The easiest way around this issue is to link to the PDF directly and not use an iframe. There will be cases where using a direct download link isn’t workable. I tried various solutions like using an object tag and adding some responsive css with no success. The solution I found was to use Google’s PDF Viewer. I was able to keep the PDF in an iframe and have it scrollable on an iPhone/iPad. Google’s PDF Viewer uses the Google Docs rendering engine. To add the Google PDF Viewer to your code, add this to the iframe tag in the ‘src’ attribute: ‘http://docs.google.com/gview?url=’ + ‘insert link to PDF’. I hope this can help others who’ve encountered the same problem.

Matthew Dailey

Web developer, photographer, and Photoshop user.