1463335 - anchor and input superposed makes the JavaScript non active.

Status: NEW

(Core :: Layout: Form Controls, defect, P3)

Description

[Karl Dubost💡 :karlcow]

This is a spin-off of https://webcompat.com/issues/14786

Original bug report

    1. Navigate https://www.makemytrip.com/pwa/flights/mmt-login. 
    2. Type in the required information (Email/Password).
    3. Tap the “Show password” button.
    4. Observe behavior.
  
**Expected Behavior:**
Password is shown in clear.

**Actual Behavior:**
Nothing happens, password is not shown in clear.

**Note:**
    1. Reproducible on Firefox 57.0.4 Release (Mobile).
    2. Not reproducible on Chrome (Mobile) 63.0.3239.111. 
    3. Screenshot attached.
    4.  Affected area: 
```html
<div class="Password form_label_container append_bottom8">
	<p class="border_bottom">
		<input placeholder="Password (minimum 6 characters)" id="password" class="form_field" type="password">
			<a href="javascript:void(0);" onclick="toggleEye()" id="eyeIcon" class="pull-right inactivevisibleicon">&nbsp;</a>
		</p>
		<p class="error_label RobotoRegular" id="passwordError">Password cannot be less than 6 characters</p>
	</div>
```
![screenshot_1](https://user-images.githubusercontent.com/12184325/34821473-7c31803e-f6cc-11e7-9c6e-788c59776e90.png)

**Watchers:**
@softvision-sergiulogigan
@softvision-oana-arbuzov

sv; country: in
https://webcompat.com/uploads/2018/1/4b5430be-24da-42ef-8143-fb0190075d93.jpeg

![passwordnotshown](https://user-images.githubusercontent.com/12184325/34821537-c76fcc36-f6cc-11e7-9eb0-9080dbba606d.gif)

Comment 1

[Karl Dubost💡 :karlcow]

I'm not sure if it's layout or events. Shifting the boxes with CSS make it work. The node receives the click event.

Comment 2

[Olli Pettay [:smaug][[e-mail]]]

Sounds like a layout issue then. Does the anchor element, which has just empty string inside it, cover the input element?

Comment 3

[Xidorn Quan [:xidorn] UTC+10]

Attachment: testcase

I... have no idea how to explain the behavior at all...

See the testcase, both Blink and Gecko shows the <div> element (a green block) in a position between the background of <input> and its text (why???).

Gecko thinks the overlap area belongs to <input> for hit testing, while Blink thinks it belongs to <div>. (It can be observed via the cursor icon.)

Comment 4

[Xidorn Quan [:xidorn] UTC+10]

Given the weird behavior of <input>... moving this to Layout: Form Controls.

Comment 5

[Firefox Bug Husbandry Bot]

Migrating Webcompat whiteboard priorities to project flags. See bug 1547409.

Comment 6

[Firefox Bug Husbandry Bot]

See bug 1547409. Migrating whiteboard priority tags to program flags.

Comment 7

[Ksenia Berezina [:ksenia]]

The site in https://webcompat.com/issues/14786 has changed and the link is returning 404 now. When clicking on "Login Now" on the main page and entering my email, then password, I'm able to see the password using the unhide icon. Given that there are no other active reports, unsetting the webcompat priority for now.