www.paytm.com - Gray background is displayed after selecting items

[softvision-sergiulogigan]

URL: www.paytm.com
Browser / Version: Firefox Mobile Nightly 55.0a1 (2017-06-13)
Operating System: Google Pixel (Android 7.1.2) - 1080 x 1920 pixels (~441 ppi pixel density)
Problem type: Layout is messed up

Steps to Reproduce

1. Navigate to: www.paytm.com
2. Tap the Mobile Prepaid button.
3. Fill in the Mobile Number (random).
4. Select an Operator (random).
5. Select a Circle (random).
6. Select an Amount (random).

Expected Behavior:
All selections are correctly displayed.

Actual Behavior:
Some of the selections have a gray background.

Notes:

1. The issue is also reproducible on Firefox 53.0 Release (Mobile).
2. The issue is not reproducible on Chrome (Mobile) 58.0.3029.83.
3. Screenshot attached.

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

sv; country: in

From webcompat.com with ❤️

[karlcow]

Interesting.

<input required="" value="4569886" maxlength="10" type="tel">

It's like something was staying selected at some levels.

Here one field exhibiting the grey background

and here one NOT showing a grey background.

[softvision-sergiulogigan]

Tested on a Samsung Galaxy S6 (Android 7.0) and Nightly 59, and the issue is still reproducible.

[karlcow]

I have the feeling the design has changed.
I can't reproduce anymore.
@softvision-sergiulogigan confirmed?

[softvision-sergiulogigan]

I'm getting the same design and same issue:

Tested on Lg G5 (Android 7.0) and Huawei P10 (Android 7.0), with Nightly 61.

[karlcow]

on RDM setting an artificial background-color for testing.

The user agent stylesheet for Chrome is

input {
    -webkit-appearance: textfield;
    background-color: white;
    -webkit-rtl-ordering: logical;
    cursor: text;
    padding: 1px;
    border-width: 2px;
    border-style: inset;
    border-color: initial;
    border-image: initial;
}

I think this is coming from

https://dxr.mozilla.org/mozilla-central/rev/ef1fefe4c6d1f95e2bdf872094e02e85c962aa86/mobile/android/themes/geckoview/content.css#233

which is defined in https://dxr.mozilla.org/mozilla-central/source/mobile/android/themes/geckoview/defines.css

	--form_background_disabled: #f5f5f5;

This probably needs to be adjusted to match which ever other browsers are doing.

It looks like a variation of https://bugzilla.mozilla.org/show_bug.cgi?id=1435665

[karlcow]

Close as duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1435665