www.msn.com – Multiple arrows displayed for drop-down menus on “Auto” page

[softvision-oana-arbuzov]

URL: http://www.msn.com/en-us/autos
Browser / Version: Firefox Mobile Nightly 56.0a1 (2017-06-19)
Operating System: LG G5 (Android 7.0) - Resolution 1440 x 2560 pixels (~554 ppi pixel density)
Problem type: Something else - I'll add details below

Steps to Reproduce

1. Navigate to: http://www.msn.com/en-us/autos
2. Observe drop-down menus.

Expected Behavior:
Single arrow is displayed.

Actual Behavior:
Two arrows are displayed.

Note:

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

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

sv; country: in

From webcompat.com with ❤️

[softvision-oana-arbuzov]

This might be a duplicate of #1368555

[karlcow]

<select id="findacar-makes" aria-label="Select a Make"
    data-target="new" data-id="59" data-m="{&quot;i&quot;:59,&quot;p&quot;:57,&quot;n&quot;:&quot;Make&quot;,&quot;y&quot;:5,&quot;o&quot;:2}">
    <option value="sponsored-cadillac" data-id="AAdalAp"
        selected="">Make (e.g. Cadillac)</option>
    <option value="acura"
        data-id="AAcOWtW">Acura</option>
    <option value="alfa-romeo" data-id="AAdalxW">Alfa Romeo</option>

    <!-- cut a long list … -->

</select>

with

#findacar.hub-page .light select {
	-webkit-appearance: none;
	appearance: none;
	background: #fff;
	border: .1rem solid #a0a0a0;
	color: inherit;
	display: block;
	height: 3rem;
	margin: 0;
	padding: .3rem 1.5rem;
	width: 100%;
}

This is indeed a duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1368555

[jwatt]

Maybe someone with an account for the site could double check that this site works in a Nightly build with the pref layout.css.webkit-appearance.enabled set to true?

[jwatt]

Actually never mind that. You don't need an account, and the site seems to have fixed things to work in Firefox even without the layout.css.webkit-appearance.enabled pref being set.

[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.