Fullpage screenshots taken with the console use an inferior image scaling algorithm, compared to normal screenshots.



4 years ago
3 months ago


(Reporter: defer.com, Unassigned)


Firefox Tracking Flags

(Not tracked)



(5 attachments)



4 years ago
Created attachment 8632164 [details]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:39.0) Gecko/20100101 Firefox/39.0
Build ID: 20150630154324

Steps to reproduce:

I use a website that makes use of scaling down pictures to 90x90 squares in the browser.
The website can be up to 7000px tall, so I use the Firefox console to take a fullpage screenshot of the website, instead of taking a screenshot using printscreen.
To do this, I press Shift+F2 to open the console. Then I enter "screenshot --fullpage" to save a fullpage screenshot of the website on my computer.

The website I use is http://brantsteele.net/hungergames/personal.php but I recommend reproducing on another website that scaled down pictures, since this one requires knowledge of the website and entering quite a bunch of stuff until you get to see the images.

Actual results:

When viewing the produced fullpage screenshot, the scaled down images look pixelated and "ugly".
This is not supposed to happen, and does not happen when viewing the website normally or taking a normal screenshot.

Expected results:

When taking a fullpage screenshot using the console, the images on a website should be scaled in the same way as when viewing the website normally.
Scaled down images should be scaled down smoothly and not have "pixelation and sharp edges".
See attached file for comparison.


4 years ago
Severity: normal → minor
Component: Untriaged → Developer Tools: Console
Summary: Fullpage screenshots taken with the console use an inferior image scaling algorithm, compared to normal normal screenshots. → Fullpage screenshots taken with the console use an inferior image scaling algorithm, compared to normal screenshots.

Comment 1

4 years ago
I have found a "reduced testcase" to easily reproduce the bug.
Step 1: Go to http://htmledit.squarefree.com/
Step 2: enter the following line of HTML:
<img src='https://upload.wikimedia.org/wikipedia/commons/1/1b/RCA_Indian_Head_test_pattern.JPG' height='90' width='90'/>

You will now see a scaled down image on the bottom of the page. It should be scaled down correctly, using a scaling algorithm that makes the image appear as smooth and not pixelated. This is how it should be.
Now Press Shift+F2 and enter "screenshot --fullpage" and compare the produced image to the website. The scaled down image in the fullpage screenshot will be pixelated and look very different, compared to how it looks like on the actual website.

Comment 2

4 years ago
Created attachment 8632174 [details]
reduced testcase.png
Component: Developer Tools: Console → Developer Tools: Graphic Commandline and Toolbar
Johan, is this behavior fixed by your patch for Retina screens in bug 970618, or is this a separate issue?

This one could be specific to Windows.
Flags: needinfo?(jj)

Comment 4

4 years ago
No, it is not fixed.
I am running on a Retina MacBook Pro. The screenshot-command before bug 970618 took non-retina screenshots, after it took retina screenshot on retina-enabled devices. In either case, the resized picture doesn’t look as sharp as when presented to the user. I’m assuming it’s because we’re drawing the page to a canvas.
Flags: needinfo?(jj)

Comment 5

4 years ago
Created attachment 8632233 [details]

Comment 6

4 years ago
Created attachment 8632235 [details]

Comment 7

4 years ago
Created attachment 8632236 [details]
Thanks for confirming the issue, Johan!
Ever confirmed: true

Comment 9

7 months ago
3 years later, bug still present in the current version.


6 months ago
Product: Firefox → DevTools
Component: Graphic Commandline and Toolbar → Shared Components
Version: 39 Branch → unspecified
You need to log in before you can comment on or make changes to this bug.