1830749 - Screenshots overlay is offset to the left on https://www.opm.gov/healthcare-insurance/healthcare/health-savings-accounts/frequently-asked-questions/

Status: NEW

(Firefox :: Screenshots, defect, P3)

Description

[Daniel Holbert [:dholbert]]

STR:

1. Visit https://www.opm.gov/healthcare-insurance/healthcare/health-savings-accounts/frequently-asked-questions/
2. Right-click and choose "Take Screenshot"

ACTUAL RESULTS:
The screenshot overlay seems to be offset to the left by 50% of the viewport-width:

• The instructions are pushed off the left side (and partially cropped)
• The "Save Full Page | Save Visible" buttons are near the top-center
• The gray overlay ends halfway across the screen.
• I can't manually select anything to the right of that midpoint.

EXPECTED RESULTS:
No such leftwards offsetting.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot showing what the UI looks like

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screenshot of what actually gets screenshotted if I click "save visible"

This bug appears to be a cosmetic glitch with the positioning of the UI. If I follow the STR (and see the broken-looking UI in comment 1) and then click "Save Visible", then here's what I get -- it's the actual correct visible area.

Comment 3

[Daniel Holbert [:dholbert]]

It looks like the site has some CSS which is matching our overlay dialog.

Here's the CSS from the site:

@media screen and (min-width: 415px) {
	[role="alertdialog"],
	[role="dialog"] {
[...]
		transform: translateX(-50%);
	}

(source, lacking newlines/prettification: https://www.opm.gov/cdn/css/themes/opm-uswds/styles.css )

And that rule matches our screenshot overlay element which has [role="dialog"]:

<iframe [...] id="firefox-screenshots-preselection-iframe" role="dialog"></iframe>

So our overlay element gets offset 50% to the left.
Maybe we need to set something like transform: none !important our screenshot iframe to avoid this?

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Here's a reduced testcase with a CSS Rule that applies a handful of styles targeted at the site's own dialogs, which happen to be quite problematic when they inadvertently match the screenshot dialog.

Comment 5

[Sam Foster [:sfoster] (he/him)]

This was yet another motivation for moving that overlay into browser chrome (bug 1696573) and will get fixed when we ship that work in bug 1789727.

Comment 6

[Daniel Holbert [:dholbert]]

Thanks. I can confirm that the issue goes away if I manually toggle screenshots.browser.component.enabled to true (per bug 1789727).