1771184 - Some canvas elements, including PDF.js, become blurry with system scaling set to 175% or 225%

Status: UNCONFIRMED

(Core :: Graphics: Text, defect)

Description

[modreview]

Attachment: Screenshots showing Canvas websites on different system scaling levels and on Firefox and Microsoft Edge

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:100.0) Gecko/20100101 Firefox/100.0

Steps to reproduce:

I opened both the PDF.js demo page (https://mozilla.github.io/pdf.js/web/viewer.html), and diagrams.net (canvas based website) with the Windows scaling level set to 100%, 125%, 150%, 175%, 200% and 225%. For diagrams.net, I only tested 175% and 200%. (It is possible to reproduce this by changing layout.css.devPixelsPerPx in about:config)

I ensured that all window sizes are similar/exactly the same where possible. I set PDF.js zoom level to Page width, which should make the PDF file have the same size independent of system scaling level. After changing scaling level, I ensured to change the zoom level and then change it back to Page width to ensure the canvas is properly updated.

Actual results:

At all tested scaling levels except 175% and 225%, the PDF file looks sharp. However, at 175% and 225% scaling, the PDF file looks blurry, as can be seen in the attachments.

For diagrams.net, it is clearly visible that at 175% system scaling the lines appear blurry/ugly.

Expected results:

The PDF file should look sharp at 175% and 225% scaling, just like they do at all other tested scaling levels. I have attached screenshots from Microsoft Edge allowing for comparison, where the PDF file does look sharp at these scaling levels. The same applies for diagrams.net, where in Microsoft Edge the lines look sharp.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Firefox::PDF Viewer' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Ciprian Georgiu, Desktop QA]

I've tried to preproduce this issue described in comment 0, using Firefox Release 100.0 and latest Nightly 102.0a1. Interestingly enough, the PDF.js demo is displayed blurry even when Win 10 system scaling is set to 100%, not only on 175% in my case. The blurriness locked the same when I compared the pdfs printed form https://mozilla.github.io/pdf.js/web/viewer.html.

Hi, modreview! Are you still encounter this issue if you open another clean profile in Firefox (i.e. https://support.mozilla.org/en-US/kb/profile-manager-create-remove-switch-firefox-profiles)? Also, it would be useful to check this on an older Firefox versions in case it's a regression, for example with Firefox Release 99 or 98. You can download any build from here https://archive.mozilla.org/pub/firefox/candidates/.

Comment 3

[modreview]

(In reply to Ciprian Georgiu [:ciprian_georgiu], Release Desktop QA from comment #2)

I've tried to preproduce this issue described in comment 0, using Firefox Release 100.0 and latest Nightly 102.0a1. Interestingly enough, the PDF.js demo is displayed blurry even when Win 10 system scaling is set to 100%, not only on 175% in my case. The blurriness locked the same when I compared the pdfs printed form https://mozilla.github.io/pdf.js/web/viewer.html.

Hi, modreview! Are you still encounter this issue if you open another clean profile in Firefox (i.e. https://support.mozilla.org/en-US/kb/profile-manager-create-remove-switch-firefox-profiles)? Also, it would be useful to check this on an older Firefox versions in case it's a regression, for example with Firefox Release 99 or 98. You can download any build from here https://archive.mozilla.org/pub/firefox/candidates/.

I just tried opening the pdf on a clean profile on version 100, and also on version 70, 80 (had to open the .pdf directly) and 98 (using the demo URL), and all of them are blurry at 175% system scaling.

Comment 4

[Ciprian Georgiu, Desktop QA]

Thanks for checking!

Can you please tell us what resolution do you have set on your monitor (is it 1080p, 4k, or maybe something else)? Also, it would be useful to attach the information from about:support, maybe this has something to do with the GPU used.

I'm going to change the component into Graphics: Text, I think it makes more sense since it's also reproducible on diagrams.net.

Comment 5

[modreview]

Attachment: about:support

Comment 6

[modreview]

(In reply to Ciprian Georgiu [:ciprian_georgiu], Release Desktop QA from comment #4)

Thanks for checking!

Can you please tell us what resolution do you have set on your monitor (is it 1080p, 4k, or maybe something else)? Also, it would be useful to attach the information from about:support, maybe this has something to do with the GPU used.

I'm going to change the component into Graphics: Text, I think it makes more sense since it's also reproducible on diagrams.net.

The monitor is a 4k monitor (3840 x 2160) set to 175% scaling, attached to a laptop set to 200% scaling. Although I don't believe using different scaling options is the cause of the problem here; the same problem occurs in a VM with configured with a single 4k monitor set to 175% scaling. I have attached a copy of about:support to this bug report.

Comment 7

[Calixte Denizet (:calixte)]

:modreview, do you think it is a recent regression ?
If yes, could you try to use mozregression to find a regression range ?

Comment 8

[modreview]

Attachment: left: Google Chrome, middle: Firefox version between HiDPI support and including 2015-10-09, right: Firefox 116.0.2, all at 175% Scaling on Windows 10

Comment 9

[modreview]

(In reply to Calixte Denizet (:calixte) from comment #7)

:modreview, do you think it is a recent regression ?
If yes, could you try to use mozregression to find a regression range ?

Please see the attachment added above. It appears that the blurriness at 175% has been there since HiDPI support was added, and from a Nightly build from 2015-10-10 it got slightly blurrier. Google Chrome has been added on the left for comparison.

Comment 10

[modreview]

I accidentally put the wrong dates in the previous comments. Between versions 2015-11-09 and 2015-11-10, the blurriness slightly increased.

Comment 11

[Tobias Schula]

Attachment: W10, scale 175%; left regular display, blurry; right: same scale, aero peak

Additional observation: hovering the taskbar and using the "aero peak" function, the blurriness disappears. I can observe this with Firefox and Zotero.