Images not displaying in Firefox

[benwalsh]

• I have a web application using pdf.js version 1.1.114, build 3fd44fd, with pdf.worker.js and compatability.js included. I have tried upgrading to the latest version but the problem persists.
• PDFs display fine in almost all browsers
• In Firefox, images are not appearing correctly in some cases.
• My version of Firefox is 40.0.3 for OS X Yosemite 10.10.5 but we have received reports of the same issue on Firefox running on other operating systems.
• The PDF with the issue is here

Screenshots

Chrome -- displays correctly

Firefox -- no images!

[yurydelendik]

Looks good here:

and also look good at http://mozilla.github.io/pdf.js/web/viewer.html

I see your fonts are corrupted as well. Do you use some custom solution?

[benwalsh]

Not sure what a "custom solution" is in this context -- it's built into our web app, but the library is off-the-shelf, just the downloaded pre-built versions of pdf.js and pdf.worker.js.

The two functions where most of the heavy lifting happens are below: setting up the document and rendering the page.

      this.renderPage = function () {
          var viewport = this.page.getViewport(this.attr.zoomLevel);
          if (this.attr.zoomLevel == 1.0) { // default, scale to fit height into iFrame
            this.canvas.height = $(window).height();
          } else { // zoomLevel changed
            this.canvas.height = viewport.height;
          }
          this.canvas.width = viewport.width;
          this.context = this.canvas.getContext('2d');
          this.page.render({ canvasContext: this.context, viewport: viewport });
        };

        this.showDocument = function () {
          var $canvas = $('<canvas>', {'class': 'js-canvas'});
          this.$content.replaceWith($canvas);
          this.canvas = $canvas[0]; // the "canvas" must be an HTML DOM Element, not a jQuery collection.
          this.pageStep = 1;
          $('.main').css('overflow', 'auto');
          PDFJS.workerSrc = this.workerUrl;
          PDFJS.getDocument(this.url).then(function (pdf) {
            this.pdf = pdf;
            this.pageCount = this.pdf.pdfInfo.numPages;
            this.loadingComplete();
            this.getPage(this.savedPageNumber);
            this.setupSlider();
          }.bind(this));
        };

[yurydelendik]

Are you reusing the same canvas for multiple renderings or creating a new one? (I don't see you are waiting on rendering to be completed, so your previous rendering might collide with next one. See https://github.com/mozilla/pdf.js/blob/master/examples/learning/prevnext.html)

[benwalsh]

Think I've uncovered the issue, it has to do with the resources being sent as blob: and data: which contravenes our CSP. Will need to find a workaround.

Thanks!

[timvandermeij]

Closing as resolved as this issue does not appear to be caused by PDF.js (directly). Otherwise we can reopen this if more details have been provided.