1538256 - 'Screenshot Node' produces screenshot that is cut off on right

Status: RESOLVED FIXED

(DevTools :: Inspector, defect, P3)

Description

[Andrey]

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

Steps to reproduce:

1. Right click.
2. Select "Inspect Element".
3. In Inspector, hover over a node and take note of the width of the element in the browser window (also appears in the Box Model tab in the Inspector).
4. Right click that node in Inspector and click "Screenshot Node".
5. Check the width of the screenshot and compare it to the node's width in the browser.

Actual results:

The screenshot is 7px less wide, and it's cut off on the right.

Expected results:

The screenshot should not be cut off.

Comment 1

[Andrey]

Attachment: 'Screenshot Node' Demo

Comment 2

[Andrey]

Attachment: 'Screenshot Node' result

Comment 3

[Patrick Brosset <:pbro>]

I tested on macOS with Firefox 67 and it worked fine there. It seems to be a Windows only issue.

Comment 4

[Andrey]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:67.0) Gecko/20100101 Firefox/67.0
The bug is still here.

Comment 5

[Yves Goergen]

I can confirm this for Firefox 73.0 x64 on Windows 10.

With several pages and element types, it looks like the right-most 10 or so pixels are missing from the screenshot. This makes that whole feature useless because I can't use the generated picture for anything. I'd like to use it as graphical snippet for a product documentation but now I'll have to edit and crop a larger screenshot manually again.

Has this feature ever worked? When did it break?

Comment 6

[Yves Goergen]

Attachment: Gitlab issue list, full top-right area

Comment 7

[Yves Goergen]

Attachment: Gitlab issue list, green button alone saved with "Screenshot Node"

Comment 8

[jscher2000]

It seems a scroll bar width of the right side of the image is cut off. Example test page: https://www.jeffersonscher.com/res/node-screenshot.html

There was a fix for that in Firefox 45 per Bug 1210031 (only subtract scrollbars for window screenshots). So it seems to be a regression.

(Came up on SUMO: https://support.mozilla.org/questions/1282435 )

Comment 9

[Razvan Caliman [:rcaliman]]

Attachment: macOS scrollbars always on

This bug reproduces on macOS as well. The scrollbars need to be set to be always visible. Go to System Preferences > General > Show Scrollbars > Always

As jscher2000 mentions, the width of the scrollbar is subtracted from the end image.

Steps to reproduce:

• Run the following in the address bar of a new tab:

data:text/html,<style>body {height: 200vh} div {width: 100px; height: 100px; background: green; border: 10px solid black;}</style><div>

• Inspect the green <div> element
• In the Markup panel of the Inspector, right-click the <div> and pick "Screenshot Node"

Expected
An image of the green node with black border all around

Actual result
The black border is cut off from the right-hand side of the node

Comment 10

[Razvan Caliman [:rcaliman]]

Attachment: Bug 1538256 - Do not subtract scrollbar width from node screenshots. r=gl

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/7e34f1465dd6
Do not subtract scrollbar width from node screenshots. r=gl

Comment 12

[Oana Pop-Rus]

https://hg.mozilla.org/mozilla-central/rev/7e34f1465dd6