search

mozilla / fx-private-relay-add-on

Companion add-on for Firefox Relay. Keep your email safe from hackers and trackers. Make an email alias with one click, and keep your address to yourself.
https://addons.mozilla.org/en-US/firefox/addon/private-relay
Mozilla Public License 2.0
70 stars 14 forks source link

E-mail field appears on the top of any page elements #45

Open IhorHordiichuk opened 4 years ago

IhorHordiichuk commented 4 years ago

E-mail field appears on the top of any page elements

How to reproduce:

The first way

  1. Launch Firefox
  2. Install and turn on the Private Relay extension in Firefox
  3. Install and turn on the To Google Translate extension in Firefox
  4. Open any URL where the Private Relay icon available into the email field. For example:
  5. Place the email field to the center of window
  6. Select some text and right click on it. Then move to the To Google translate and choose Translate (auto/your-lang)

The second way

  1. Launch Firefox
  2. Install and turn on the Private Relay extension in Firefox
  3. Open any URL where available the Private Relay icon into the email field and any fixed page elements. For example:
  4. Scroll down until the email field will appear on the top of Accept cookies element

This error appears to be caused by 999999999 ... z-index value of .relay-email-input-wrapper Screenshot from 2020-06-30 14-18-54

shgysk8zer0 commented 4 years ago

I was slightly surprised to see this as well. The cause seems to be in relay.css:358

.fx-relay-email-input-wrapper {
    position: relative;
    pointer-events: none;
    padding: 0 !important;
    width: 100%;
    z-index: 99999999999999999;
    box-sizing: border-box;
}

I think that inserting a wrapper element on its own is bound to cause problems, especially with the z-index set here and also the width: 100%.

Instead, perhaps it would be best to replace the <input> with something along the lines of <input is="fx-relay-input>`, though I'm not sure of all the details of custom elements extending inputs. I just think an approach where the input is replaced by something that makes minimal alteration to the form is the best approach for compatibility.

Take, for example, a form where the <label> is adjacent to the <input> which, although ill-advised is still pretty common.

Intended design:

image

With Relay's changes:

image