connect.detik.com - Multiple arrows are displayed overlapped on user profile page

[softvision-oana-arbuzov]

URL: https://connect.detik.com/dashboard/public/mozilianulb?

Browser / Version: Firefox Mobile Nightly 59.0a1 (2017-11-27)
Operating System: Huawei P10 (Android 7.0) - Resolution 1080 x 1920 pixels (~432 ppi pixel density)
Tested Another Browser: Yes

Problem type: Design is broken
Description: Multiple arrows are displayed overlapped on user profile page

Prerequisites

1. Account created and signed in.

Steps to Reproduce

1. Navigate https://connect.detik.com/dashboard/public/mozilianulb?
2. Tap the “Browse” menu button.
3. Tap the user.
4. Observe top bar.

Expected Behavior:
Single arrow is displayed.

Actual Behavior:
Multiple arrows are displayed overlapped.

Note:

1. Reproducible on Firefox 57.0 Release (Mobile).
2. Not reproducible on Chrome (Mobile) 62.0.3202.84.
3. Screenshot attached.

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

sv; country: id

From webcompat.com with ❤️

[karlcow]

Missing -moz-appearance: none

[karlcow]

#framebar .kanal_pilih select {
	background: transparent;
	border: 0;
	border-radius: 0;
	-webkit-appearance: none;
	color: #17368f;
	font-size: 13px;
	text-transform: none;
	font-weight: bold;
	float: left;
	height: 30px;
	padding-right: 20px;
	position: relative;
	z-index: 1;
}

Adding -moz-appearance: none will solve it until we add support for -webkit-appearance: none

[karlcow]

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

[jwatt]

Fixed in Nightly with the pref layout.css.webkit-appearance.enabled set to true.

[softvision-sergiulogigan]

Hey @jwatt
Tested this on Google Pixel (Android 8.1.0) - 1080 x 1920 pixels (~441 ppi pixel density) and on Firefox Nightly 63.

layout.css.webkit-appearance.enabled - FALSE

layout.css.webkit-appearance.enabled - TRUE

Looks like flipping the pref fixes the site.