Document is blurry

[mikecoulhs]

Attach (recommended) or Link to PDF file here:
Infographic_EAP_EN_v2 (1).pdf

Configuration:

• Web browser and its version:
  Chrome Version 99.0.4844.51 (Official Build) (x86_64)
• Operating system and its version:
  macOS Catalina 10.15.7
• PDF.js version:
  Repros with version at PDF.js Demo Viewer
• Is a browser extension:
  No

Steps to reproduce the problem:

1. Go to https://mozilla.github.io/pdf.js/web/viewer.html
2. Open the file
   This is how the document appears in Adobe Acrobat Reader:
   

This is how it appears in the viewer. (Please view in full size) Note the lack of crispness of the text in particular.

Thank you!

[mikecoulhs]

HI @luisberth , I just tried it in firefox and it appears the same. The text is similarly blurry and the document is clipped halfway down.

[SamyCookie]

Hello, I also confirm the issue on a Linux Debian Bookworm 64bits with Firefox 98 and the embedded PDF.js reader (v2.13.93).

[vlakken]

I noticed this also, in my case always returning true here made it better:

https://github.com/mozilla/pdf.js/blob/master/src/display/canvas.js#L1045

[calixteman]

I think the text blurriness is due to:

pdf.js/src/display/canvas.js

Line 2667 in 0dd6bc9

this.ctx.drawImage(groupCtx.canvas, 0, 0);

where there is a scaleY !== 1 and very likely it's the same cause for the images.

[margaux0]

We are having the same issue. Text in high quality images in the pdf is not rendered properly. We have tested the pdf in the web viewer (https://mozilla.github.io/pdf.js/web/viewer.html) to check if we were rendering incorrectly, but have found the same behaviour occurs there.

[mikecoulhs]

Hi calixteman! I was wondering (hoping?) if there was any progress on this? We're seeing it on a fair number of documents (some worse than others). Interestingly, it seems like this might be a regression - we have a very old version of pdf.js (1.10.129) that doesn't exhibit the blurriness (at least for one document I've looked at) Thanks!

[mikeweilgart]

I just noticed this stems from Firefox. I've noticed now on a few financial websites that when I attempt to view OR PRINT a PDF directly from Firefox, the result is blurry and unusable. Instead I have to download the PDF and then print it from Acrobat Reader to get a crisp printout.

I also found these other bug reports which seem to be about the same problem:

#14147
https://bugzilla.mozilla.org/show_bug.cgi?id=1506953

[marco-c]

I just noticed this stems from Firefox. I've noticed now on a few financial websites that when I attempt to view OR PRINT a PDF directly from Firefox, the result is blurry and unusable. Instead I have to download the PDF and then print it from Acrobat Reader to get a crisp printout.

This is a different problem, what you're seeing is https://bugzilla.mozilla.org/show_bug.cgi?id=1274502 (https://bugzilla.mozilla.org/show_bug.cgi?id=1774631 or https://bugzilla.mozilla.org/show_bug.cgi?id=1777209), which are fixed in Firefox 104.

I also found these other bug reports which seem to be about the same problem:

#14147
https://bugzilla.mozilla.org/show_bug.cgi?id=1506953

Yes, this is a duplicate of #14147.

[mikecoulhs]

@marco-c I'm a little confused - as reported, this ticket repros in Google Chrome.

[marco-c]

It also reproduces in Firefox, the underlying bug is the same.

[nwang-highspot]

I think the text blurriness is due to:

pdf.js/src/display/canvas.js

Line 2667 in 0dd6bc9

this.ctx.drawImage(groupCtx.canvas, 0, 0);

where there is a scaleY !== 1 and very likely it's the same cause for the images.

Hi @calixteman How can we fix the problem, seems I can still reproduce the issue.

[marco-c]

This issue is not closed because it was fixed, it was closed as a duplicate of #14147.

[calixteman]

In order to handle correctly transparency, we use some intermediate canvas and sometimes they can be too big.
So in order to prevent some allocation issues, the group is drawn on a smaller canvas and then resize thanks to a scale transformation:

pdf.js/src/display/canvas.js

Line 2885 in de7d1d2

scaleY = drawnHeight / MAX_GROUP_SIZE;

In the pdf attached to this issue, the bounding box used to compute the canvas dimensions is [ 0, 0, 5950, 50210 ] and the height here is a way too big.

[nwang-highspot]

@calixteman So what is the recommended size(height) for the canvas dimensions?

[wmerobertson]

This looks to be a duplicate of #14982. It is fixed by disabling this block: pdf.js/src/display/canvas.js