1646063 - Fixed-positioned elements (e.g. headers/footers) are included in screenshots, at unexpected places, if you happen to scroll while capturing the screenshot

Status: NEW

(Firefox :: Screenshots, defect, P2)

Description

[wojtek]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:77.0) Gecko/20100101 Firefox/77.0

Steps to reproduce:

1. Open any page with fixed header (for example facebook or https://community.wanikani.com/t/userscript-wanikani-heatmap/34947/627)
2. Open screenshot tool
3. Make a custom selection that is bigger then screen height and requires scrolling the view
4. Try to copy/save screenshot without the header in the middle

Actual results:

I get a clean screenshot without the header in the middle

Expected results:

The problem stems from the header rendered in the middle. We could just scroll up so that our selection start just below the header (so it wouldn't be included in the screenshot) but it's impossible to do because action buttons are at the bottom of the selection area which requires scrolling down so the header overlaps the selection (which hides behind upper edge of the viewport).

Ideally action buttons should hover within selection and within viewport

Comment 1

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

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 2

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

The severity field is not set for this bug.
:alaskanemily, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 3

[Emily McDonough [:alaskanemily]]

As a fairly easy workaround, you can also press enter to take the screenshot, rather than using the buttons. That way you can stay scrolled up high enough to not include the header.

Moving this to the screenshot component.

Comment 4

[Daniel Holbert [:dholbert]]

I just ran into this myself, with a footer in my case. I'll attach a testcase to demonstrate the issue.

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Here's a testcase to demonstrate this bug. Steps to reproduce (also included inside the testcase itself):

1. Ask Firefox to capture a screenshot.
2. Click and drag downwards, to produce a screenshot-selection-rect that includes some numbers and the red square.
3. Allow the page to scroll a bit when your cursor reaches the bottom (as you're creating your selection rect).
4. Make a mental note of how your selected area looks (and what numbers are covered up by the red block), and then hit "Copy" or "Download"
5. Compare the resulting screenshot to what you actually saw when you captured the screenshot.

EXPECTED RESULTS: The screenshot should look like it did when you captured it -- in particular, the red area should be covering the same chunk of the page (and should probably be at the bottom of the screenshot, assuming that's where it was when you captured the screenshot).

ACTUAL RESULTS: The screenshot shows the red square in the middle somewhere, covering up a different set of numbers from the ones it was covering up when you actually clicked copy/download to capture the screenshot.

Comment 6

[Daniel Holbert [:dholbert]]

Attachment: what I see when I'm about to capture my Firefox Screenshot

Here's what I see when I follow the STR (I clicked near "26" and then dragged downwards). This is the preview that Firefox shows me, right before I capture the screenshot.

So, seeing this, my expectation is that Firefox is going to produce a screenshot with the red area at the bottom of the image, and with numbers 46, 47, etc. covered up by that red square.

Comment 7

[Daniel Holbert [:dholbert]]

Attachment: the actual screenshot that Firefox captures

...but here's the screenshot that Firefox produces instead. Notably, the red area is floating in the middle. It's on top of the content that it was covering up was in when I initiated the screenshot-capturing operation, not on top of the content that it was covering up when I actually hit the Copy/Download button.

Comment 9

[Daniel Holbert [:dholbert]]

(note: bug 1708403 sounds very similar to this bug, though that one is specific to the "screenshot node" feature, and it regressed more recently than when this bug was filed; so it's probably not a dupe. Though their underlying causes may share some common themes.)

Comment 10

[Daniel Holbert [:dholbert]]

Also, while I'm here: I just confirmed that this is indeed still reproducible in current Nightly 90.0a1 (2021-05-30), with my STR from comment 5.

Comment 12

[jscher2000]

The following support thread seems to be reporting another manifestation of this issue in Firefox 88-89: https://support.mozilla.org/questions/1333973

It appears that position: fixed elements are captured at their original position and display status (as in a full screen screenshot) rather than based on the current condition of the viewport, which is a problem for users drawing a selection or using "Save visible" and wanting to capture that element.

Comment 18

[ISHIKAWA, Chiaki]

This problem is with Firefox 116.0.3 under Windows 10 today.

I further observe that the screen is cut short in the lower portion.
That is, I need to scroll to reach the lower part of the image which I want to capture.

But somehow the image is cut short near the bottom slightly. (Now I realize this unexpected cutoff may happen without scrolling after some experimentation.)

https://bugzilla.mozilla.org/show_bug.cgi?id=1849695#c7
https://bugzilla.mozilla.org/show_bug.cgi?id=1849695#c5

Comment 20

[byzod]

Attachment: FirefoxScreenshotAndWhatItShouldWorksLike.gif

This is stupid, most site have a fixed banner now, which ruined the screenshot completely
Even bugzilla has a banner!

Check the attached comparing demo of firefox page screenshot and a random real screenshot app (you can find hundreds of app like this on internet, for example https://pixpinapp.com/)

Comment 21

[Victoria Price]

I wanted to add that the footers being captured can also sometimes render differently than the footer that is actually on the page. I don't know how to attach a screenshot, or I would to show what I mean.

Comment 22

[Victoria Price]

Attachment: Screenshot from https://www.ontario.ca/laws/statute/90b16#BK234

Figured it out. Here is the glitched screenshot.

Comment 23

[Victoria Price]

Attachment: Footer from https://www.ontario.ca/laws/statute/90b16#BK234

Here's the actual footer.

Comment 24

[Victoria Price]

Attachment: Header that is different from glitched screenshot

Attached wrong screenshot. Here is a corrected one.