Black flickering while rendering

[danez]

Since #6551 landed, we have black flickering before the content finally shows up. We use the api to render pdfs in our own DOM-Containers. What do we need to change to get rid of the flickering?
I tested in Chrome 46. I think it is the same issue why #4556 got reverted.

Here is a snip of our code:

PDFJS.getDocument(url, null, null, function (status) {
    var progressBar = Y.one('.pdf-js-container .progress-bar');
    if (!progressBar) {
        return;
    }
    if (!status || !status.loaded || !status.total) {
        progressBar.one('.percent').setContent('Error loading document. Please try again later.');
        return;
    }

    var progress = parseInt((status.loaded / status.total) * 100, 10) + '%';
    progressBar.one('.percent').setContent(progress);
    progressBar.one('.bar').setStyle('width', progress);
}).then(function (pdfDocument) {
    that.pdfDocument = pdfDocument;
    for (let pageNum = 0; pageNum < pdfDocument.numPages; pageNum++) {
        that._createPagePlaceHolder(pageNum + 1); // way faster
    }
    for (let pageNum = 0; pageNum < pdfDocument.numPages; pageNum++) {
        that._appendPage(pageNum + 1);
    }
});
...
_appendPage: function (pageNumber) {
    var that = this;

    var renderPageInterval;

    that.pages[pageNumber] = null;
    // Poor person's promises:
    // Very complex PDFs can mess with PDF.JS internal housekeeping and thus produce empty pages
    // Thus we make sure that page render promises are only given once all previous pages have been rendered
    var renderPageIntervalCall = function () {
        renderPageInterval = setInterval(renderPageWhenReady, 250);
    };
    // Associates the actual page with the view, and drawing it
    var renderPageWhenReady = function () {
        // The first page  obviously does not have a predecessor that might get filled with content
        // Querying for #pageContainer(n-1) .canvasWrapper is not ideal, but still better then setting up more event listeners
        if (pageNumber === 1 || document.querySelector('#pageContainer' + (pageNumber - 1) + ' .canvasWrapper') !== null) {
            that.pdfDocument.getPage(pageNumber).then(function (pdfPage) {
                var pageContainer = Y.one('#pdf-reader-page-' + pageNumber);
                var pdfPageWidth = pdfPage.getViewport(1.0).width;
                var scale = that._calculateScale(pdfPageWidth);
                var pdfPageView = new PDFPageView({
                    container: pageContainer,
                    id: pageNumber,
                    // PDF.js internal converts the scale to css units (96.0/72.0 = 1.333), so we need to revert this here
                    scale: scale * 0.75,
                    defaultViewport: pdfPage.getViewport(scale),
                    textLayerFactory: new DefaultTextLayerFactory(),
                    annotationsLayerFactory: new DefaultAnnotationsLayerFactory()
                });

                pdfPageView.setPdfPage(pdfPage);
                pdfPageView.draw().then(function () {
                   ...
                });
            });
            clearInterval(renderPageInterval);
        }
    };
    renderPageIntervalCall();
},

[yurydelendik]

You need to show canvas only when rendering is done or at the first onContinue callback call. The PDFPageView shall take care of that though. I cannot run the code snipped provided above, please publish a complete example online.

[danez]

Ok I finally found the issue, we were missing this css part:

[hidden] {
      display: none !important;
}

But now we have the problem that the hidden attribute is not getting removed.
If I see it correctly the hidden attribute is only removed when using a renderingQueue. I think it should be removed in any case.
https://github.com/mozilla/pdf.js/blob/master/web/pdf_page_view.js#L409

[yurydelendik]

Can you provide information about version of pdf.js you are using? The problem above must be addressed by #6662.

[danez]

Yes you are right I was using a version before that fix. Thanks for the help.