www.coco01.net - Incorrect display of the “Sign in/Register” buttons

[softvision-oana-arbuzov]

URL: http://www.coco01.net

Browser / Version: Firefox Mobile Nightly 58.0a1 (2017-09-28)
Operating System: Google Pixel (Android 8.0.0) - 1080 x 1920 pixels (~441 ppi pixel density)
Tested Another Browser: Yes

Problem type: Design is broken
Description: Incorrect display of the “Sign in/Register” buttons
Steps to Reproduce:

1. Navigate to: http://www.coco01.net.
2. Tap the “註冊 / 登陸 ” (“Register / Login”) button.
3. Observe “Login” button in the “Login” overlay.

Expected Behavior:
Button has border and background color (gray).

Actual Behavior:
Button has no border and background color.

Note:

1. Also reproducible for “Register” button.
2. Reproducible on Firefox 55.0.2 Release (Mobile).
3. Not reproducible on Chrome (Mobile) 61.0.3163.98.
4. Screenshot attached.

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

sv; country: tw

From webcompat.com with ❤️

[MDTsai]

I can't reproduce using Firefox desktop in RDM with Firefox mobile UA string. But manually toggle status to hover or active change the color. I guess it's the default browser style, in Firefox desktop, it's:

background-color: rgb(242, 241, 240);

in Firefox mobile, it's:

background-color: rgb(255, 255, 255);

So I think it's not a compatibility issue, just different default browser style. @karlcow is there any spec define the default background color? If not, I think we can close this one.

[softvision-oana-arbuzov]

The issue is still reproducible.

Affected area:

<button id="loginBtn" type="button" class="btn btn-block btn-lg">登入</button>

Adding background-color: rgb(221, 221, 221);, the color of the button changes correctly. On Chrome the same values are applied.

.btn {
 display:inline-block;
 padding:6px 12px;
 margin-bottom:0;
 font-size:14px;
 font-weight:400;
 line-height:1.42857143;
 text-align:center;
 white-space:nowrap;
 vertical-align:middle;
 -ms-touch-action:manipulation;
 touch-action:manipulation;
 cursor:pointer;
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none;
 background-image:none;
 border:1px solid transparent;
 border-radius:4px
}

Tested with:
Browser / Version: Firefox Nightly Mobile 60.0a1 (2018-01-31)
Operating System: Google Pixel (Android 8.1.0) - Resolution 1080 x 1920 pixels (~441 ppi pixel density), Samsung Galaxy S7 Edge (Android 7.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)

@karlcow could you please check this?

[karlcow]

I can't find the register login button… but for the background-color of button, there is an issue I opened a little while ago.

https://bugzilla.mozilla.org/show_bug.cgi?id=1435665

[karlcow]

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