Catalin Sasca, Desktop QA [:csasca] Reporter
	Description • 6 years ago

[Affected versions]:
- Firefox 61.0.1
- Firefox Beta 62.0b13
- Firefox Nightly 63.0a1 (20180802220056)

[Affected platforms]:
- Windows 10 (x64) 
- macOS 10.13 
- Ubuntu 16.04 (x64)

[Steps to reproduce]:
1.Start Firefox.
2.Access www.netflix.com.
3.Click on Sign in.
4.Enter any credentials in the username and password forms.

[Expected result]:
- The writing in the background falls back when something is typed.

[Actual result]:
- The writing in the background is not falling back when something is typed.

[Regression range]:
- The issue is not a regression, as it is reproducing way back to 2014 builds.

[Additional notes]:
- Netflix has two different login pages. The one which is shown in the screencast is the one with the issue. If the other login page is encountered, simply restart firefox and try accessing again the page.

	Emilio Cobos Álvarez (:emilio)
	Comment 1 • 6 years ago

This should probably be reported to them... The label is supposed to shrink and move to the top, but the rule that does it is:

  .hybrid-login-form .hasText+.placeLabel, .hybrid-login-form .nfTextField:-webkit-autofill+.placeLabel, .hybrid-login-form .nfTextField:focus+.placeLabel { top: 7px; }

And a similar rule for:

    top: 4px;
    font-size: 11px;
    -webkit-transform: translateY(0);
    transform: translateY(0);

Of course, we don't parse :-webkit-autofill. Karl, have we seen more bugs like this? I can parse :-webkit-autofill as a no-op pseudo-class, but that's not great.

	Karl Dubost💡 :karlcow
	Comment 2 • 6 years ago

Indeed…

```html
<div class="nfEmailPhoneControls" data-reactid="18">
  <label class="input_id" data-reactid="19">
    <input type="text" name="userLoginId" class="nfTextField error hasText" id="id_userLoginId" value="foo" tabindex="0" autocomplete="email" dir="ltr" data-reactid="20">
    <label for="id_userLoginId" class="placeLabel" data-reactid="21">Email or phone number</label>
  </label>
</div>
```


```css
.nfInput .hasText + .placeLabel, 
.nfInput .nfTextField:-webkit-autofill + .placeLabel,
.nfInput .nfTextField:focus + .placeLabel {
    top: 4px;
    font-size: 11px;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}


.hybrid-login-form .hasText + .placeLabel, 
.hybrid-login-form .nfTextField:-webkit-autofill + .placeLabel,
.hybrid-login-form .nfTextField:focus + .placeLabel {
    top: 7px
}

```



https://developer.mozilla.org/fr/docs/Web/CSS/:-webkit-autofill
Bug 740979 is -moz-autofill


btw the only reason this fails is that :-webkit-autofill is not parsed, but also because browsers drop the full styling when one of the selectors is not parseable.

A good way for them to fix that is:


```css
.nfInput .hasText + .placeLabel, 
.nfInput .nfTextField:focus + .placeLabel {
    top: 4px;
    font-size: 11px;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.nfInput .nfTextField:-webkit-autofill + .placeLabel {
    top: 4px;
    font-size: 11px;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}


.hybrid-login-form .hasText + .placeLabel, 
.hybrid-login-form .nfTextField:focus + .placeLabel {
    top: 7px
}


.hybrid-login-form .nfTextField:-webkit-autofill + .placeLabel {
    top: 7px
}
```

	Karl Dubost💡 :karlcow
	Comment 3 • 6 years ago

(In reply to Emilio Cobos Álvarez (:emilio) from comment #1)
> Of course, we don't parse :-webkit-autofill. Karl, have we seen more bugs
> like this? I can parse :-webkit-autofill as a no-op pseudo-class, but that's
> not great.


Nope from the top of my memory.
Apart of https://webcompat.com/issues/8125#issuecomment-405385397

	Karl Dubost💡 :karlcow
	Comment 4 • 6 years ago

netflix contacted on the partner mailing-list.

	Karl Dubost💡 :karlcow
	Comment 5 • 6 years ago

Netflix contacted me to say it was fixed.
It is.

	Catalin Sasca, Desktop QA [:csasca] Reporter
	Comment 6 • 6 years ago

The issue is verified fixed on Firefox 62.0, Firefox Beta 62.0b20 and latest Nightly 63.0a1 (2018-08-27) under Windows 10 (x64), macOS 10.12 and Ubuntu 16.04 (x64).