PDF files do not open in Internet Explorer with Adobe Reader 10.0 - users get an empty gray screen. How can I fix this for my users?

Scott Rippey picture Scott Rippey · Sep 28, 2011 · Viewed 105.7k times · Source

There is a known issue with opening a PDF in Internet Explorer (v 6, 7, 8, 9) with Adobe Reader X (version 10.0.*). The browser window loads with an empty gray screen (and doesn't even have a Reader toolbar). It works perfectly fine with Firefox, Chrome, or with Adobe Reader 10.1.*.

I have discovered several workarounds. For example, hitting "Refresh" will load the document properly. Upgrading to Adobe Reader 10.1.*, or downgrading to 9.*, fixes the issue too.
However, all of these solutions require the user to figure it out. Most of my users get very confused at seeing this gray screen, and end up blaming the PDF file and blaming the website for being broken. Honestly, until I researched the issue, I blamed the PDF too!

So, I am trying to figure out a way to fix this issue for my users.
I've considered providing a "Download PDF" link (that sets the Content-Disposition header to attachment instead of inline), but my company does not like that solution at all, because we really want these PDF files to display in the browser.

Has anyone else experienced this issue?

What are some possible solutions or workarounds?

I'm really hoping for a solution that is seamless to the end-user, because I can't rely on them to know how to change their Adobe Reader settings, or to automatically install updates.

Here's the dreaded Gray Screen:
Edit: screenshot was deleted from file server! Sorry!
The image was a browser window, with the regular toolbar, but a solid gray background, no UI whatsoever.

Background info:
Although I don't think the following information is related to my issue, I'll include it for reference:
This is an ASP.NET MVC application, and has jQuery available.
The link to the PDF file has target=_blank so that it opens in a new window.
The PDF file is being generated on-the-fly, and all the content headers are being set appropriately. The URL does NOT include the .pdf extension, but we do set the content-disposition header with a valid .pdf filename and the inline setting.

Edit: Here is the source code that I'm using to serve up the PDF files.

First, the Controller Action:

public ActionResult ComplianceCertificate(int id){
    byte[] pdfBytes = ComplianceBusiness.GetCertificate(id);
    return new PdfResult(pdfBytes, false, "Compliance Certificate {0}.pdf", id);
}

And here is the ActionResult (PdfResult, inherits System.Web.Mvc.FileContentResult):

using System.Net.Mime;
using System.Web.Mvc;
/// <summary>
/// Returns the proper Response Headers and "Content-Disposition" for a PDF file,
/// and allows you to specify the filename and whether it will be downloaded by the browser.
/// </summary>
public class PdfResult : FileContentResult
{
    public ContentDisposition ContentDisposition { get; private set; }

    /// <summary>
    /// Returns a PDF FileResult.
    /// </summary>
    /// <param name="pdfFileContents">The data for the PDF file</param>
    /// <param name="download">Determines if the file should be shown in the browser or downloaded as a file</param>
    /// <param name="filename">The filename that will be shown if the file is downloaded or saved.</param>
    /// <param name="filenameArgs">A list of arguments to be formatted into the filename.</param>
    /// <returns></returns>
    [JetBrains.Annotations.StringFormatMethod("filename")]
    public PdfResult(byte[] pdfFileContents, bool download, string filename, params object[] filenameArgs) 
        : base(pdfFileContents, "application/pdf")
    {
        // Format the filename:
        if (filenameArgs != null && filenameArgs.Length > 0)
        {
            filename = string.Format(filename, filenameArgs);
        }

        // Add the filename to the Content-Disposition
        ContentDisposition = new ContentDisposition
                                 {
                                     Inline = !download,
                                     FileName = filename,
                                     Size = pdfFileContents.Length,
                                 };
    }

    protected override void WriteFile(System.Web.HttpResponseBase response)
    {
        // Add the filename to the Content-Disposition
        response.AddHeader("Content-Disposition", ContentDisposition.ToString());
        base.WriteFile(response);
    }
}

Answer

Scott Rippey picture Scott Rippey · Jan 24, 2012

It's been 4 months since asking this question, and I still haven't found a good solution.
However, I did find a decent workaround, which I will share in case others have the same issue.
I will try to update this answer, too, if I make further progress.

First of all, my research has shown that there are several possible combinations of user-settings and site settings that cause a variety of PDF display issues. These include:

  • Broken version of Adobe Reader (10.0.*)
  • HTTPS site with Internet Explorer and the default setting "Don't save encrypted files to disk"
  • Adobe Reader setting - disable "Display PDF files in my browser"
  • Slow hardware (thanks @ahochhaus)

I spent some time researching PDF display options at pdfobject.com, which is an EXCELLENT resource and I learned a lot.

The workaround I came up with is to embed the PDF file inside an empty HTML page. It is very simple: See some similar examples at pdfobject.com.

<html>
    <head>...</head>
    <body>
        <object data="/pdf/sample.pdf" type="application/pdf" height="100%" width="100%"></object>
    </body>
</html>

However, here's a list of caveats:

  • This ignores all user-preferences for PDFs - for example, I personally like PDFs to open in a stand-alone Adobe Reader, but that is ignored
  • This doesn't work if you don't have the Adobe Reader plugin installed/enabled, so I added a "Get Adobe Reader" section to the html, and a link to download the file, which usually gets completely hidden by the <object /> tag, ... but ...
  • In Internet Explorer, if the plugin fails to load, the empty object will still hide the "Get Adobe Reader" section, so I had to set the z-index to show it ... but ...
  • Google Chrome's built-in PDF viewer also displays the "Get Adobe Reader" section on top of the PDF, so I had to do browser detection to determine whether to show the "Get Reader".

This is a huge list of caveats. I believe it covers all the bases, but I am definitely not comfortable applying this to EVERY user (most of whom do not have an issue).
Therefore, we decided to ONLY do this embedded option if the user opts-in for it. On our PDF page, we have a section that says "Having trouble viewing PDFs?", which lets you change your setting to "embedded", and we store that setting in a cookie.
In our GetPDF Action, we look for the embed=true cookie. This determines whether we return the PDF file, or if we return a View of HTML with the embedded PDF.

Ugh. This was even less fun than writing IE6-compatible JavaScript.
I hope that others with the same problem can find comfort knowing that they're not alone!