missingmail.usps.com - Unable to mark the check-boxes from "Disclaimer and Terms and Conditions" section

[webcompat-bot]

URL: https://missingmail.usps.com/?_gl=1*veidlp*_gcl_aw*R0NMLjE1OTE3MjUyNTkuRUFJYUlRb2JDaE1Jd3AzaTBhYjE2UUlWa01EQUNoMlBBUVlrRUFBWUFTQUFFZ0lMeFBEX0J3RQ..*_gcl_dc*R0NMLjE1OTE3MjUyNTkuRUFJYUlRb2JDaE1Jd3AzaTBhYjE2UUlWa01EQUNoMlBBUVlrRUFBWUFTQUFFZ0lMeFBEX0J3RQ..#/

Browser / Version: Firefox 77.0
Operating System: Windows 10
Tested Another Browser: Yes Edge

Problem type: Something else
Description: The two boxes at the end of the form cannot be checked when using Firefox 77.0.1, thus the form CANNOT be submitted. This same form works without any problems in Microsoft Edge
Steps to Reproduce:
As I described above, I could not submit the form

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue. I've created an account, signed in and scrolled down the form to "Step 4: Disclaimer and Terms and Conditions".
Note: Make sure VPN pointing to USA is active.

Note:

1. The issue is not reproducible on Chrome.
   
2. The issue is reproducible on Firefox Nightly regardless of ETP is enabled or not.
3. Workaround: Clicking on the text, the check-box is checked.

Affected area:

<div class="mrc-custom-checkbox"></div>

Tested with:
Browser / Version: Firefox Nightly 79.0a1 (2020-06-09)
Operating System: Windows 10 Pro

Moving to Needsdiagnosis for further investigation.

[ksy36]

This is a duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=997189 where an absolute positioned input is shifted to the right of the float

We can an intervention here similarly to https://bugzilla.mozilla.org/show_bug.cgi?id=1610016

[ksy36]

Created https://bugzilla.mozilla.org/show_bug.cgi?id=1644830

[softvision-oana-arbuzov]

This is a bit strange, I can't mark the checkboxes if I click in the center of the box. If I click a bit to the right, the box is checked.

Tested with:
Browser / Version: Firefox Nightly 80.0a1 (2020-07-09)
Operating System: Windows 10 Pro

@ksy36 could you have a look on it?

[ksy36]

Looks like they've changed the layout. The input element is too far on the left now, because it's direct parent doesn't have position:relative and parent up the tree has a padding of 15px..

Maybe we should change the intervention to be

.mrc-custom-checkbox-container input {
    margin-left: -3rem;
}

(since the element with the float causing the bug has width: 2rem; and margin-right: 1rem;)

I've added https://bugzilla.mozilla.org/show_bug.cgi?id=1652643 to update it

[denschub]

Moved to bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=1891016