Closed Bug 1538256 Opened 1 year ago Closed 2 months ago

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


(DevTools :: Inspector, defect, P3)

66 Branch


(firefox76 fixed)

Firefox 76
Tracking Status
firefox76 --- fixed


(Reporter: andrey_vi, Assigned: rcaliman)




(6 files)

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.

Attached file 'Screenshot Node' Demo
Component: Untriaged → Inspector
Product: Firefox → DevTools
See Also: → 1210031

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

Ever confirmed: true
OS: Unspecified → Windows
Priority: -- → P3

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

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?

Attachment #9127101 - Attachment description: Gitlab issue details, full top-right area → Gitlab issue list, full top-right area
Attachment #9127102 - Attachment description: Gitlab issue details, green button alone saved with "Screenshot Node" → Gitlab issue list, green button alone saved with "Screenshot Node"

It seems a scroll bar width of the right side of the image is cut off. Example test page:

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: )

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"

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

Assignee: nobody → rcaliman
Pushed by
Do not subtract scrollbar width from node screenshots. r=gl
Blocks: 1621042
Closed: 2 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 76
You need to log in before you can comment on or make changes to this bug.