Relay address textboxes draw overtop other content.

[tomprince]

On some pages with in-content popups, textboxes that are detected by firefox relay get drawn over-top the in-content popup. I discovered this on the github organization setting page; when deleting an organization, the billing address, gravatar email and public email text boxes all overwrite the "are you sure you want to delete this" popup. This can be worked around by scrolling the page so they don't overlap the textbox.

Steps to reproduce:

1. Create a new organization (such as test-org-Ahyoo7ba)
2. Go the the organization settings page (e.g. https://github.com/organizations/test-org-Ahyoo7ba/settings/profile)
3. Click the "delete organization button"
4. Observer that the three relay detected text boxes (i.e. the billing address, gravatar email and public email text boxes) all display on top of the confirmation popup, and without the background shading that the rest of the page gets.

[martinthomson]

Scroll and look at the mailing list signup box on https://www.cjr.org/tow_center_reports/the-guide-to-advertising-technology.php for another example.

[birdsarah]

Scroll and look at the mailing list signup box on https://www.cjr.org/tow_center_reports/the-guide-to-advertising-technology.php for another example.

Here's a screenshot of that including 1password successfully placing button. 1password uses shadow-dom

[birdsarah]

The above image does not capture the full extent of the problem. I'll post more screenshots tomorrow.

[birdsarah]

On github org page:

After getting delete modal:

This appears to be a z-index issue

[birdsarah]

As you scroll up the newsletter page, the dom adjustment causes the email clobber the page

[markSmurphy]

I've seen this issue too. when returning to academy.newscientist.com/ the email textbox obscures the Captcha