www.leroymerlin.fr - Multiple arrows displayed for drop-downs

[softvision-oana-arbuzov]

URL: https://www.leroymerlin.fr/v3/compteinternaute/inscription/mesdonnees.do Browser / Version: Firefox Mobile Nightly 55.0a1 (2017-05-28) Operating System: Nexus 5 (Android 6.0.1) - Resolution 1080 x 1920 pixels (~445 ppi pixel density) Problem type: Something else - I'll add details below

Steps to Reproduce

1. Navigate to: https://www.leroymerlin.fr/v3/compteinternaute/inscription/mesdonnees.do
2. Type in the required information (email and password) and tap "Valider" (“Validate”).
3. After "Registration info" page is displayed observe "Selectionnez" ("Select") drop-down.

Expected Behavior: Single arrow is displayed.

Actual Behavior: Two arrows are displayed.

Note:

1. Reproducible on Firefox 53.0.2 Release.
2. Not reproducible on Chrome (Mobile) 58.0.3029.83.
3. Screenshot attached.
4. Also reproducible when navigating to:
   • https://www.leroymerlin.fr/v3/p/produits/services/cartes-cadeaux/cartes-cadeaux-l1308220779.
   • https://www.leroymerlin.fr/v3/p/services/cours-de-bricolage-l1308222751

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

sv; country: fr

From webcompat.com with ❤️

[karlcow]

This is the style for the select element.

.lm-form select, .lm-form .combo-box {
    font-size: 1em;
    min-height: 2.08em;
    border: 1px solid #D3D3D3;
    background: linear-gradient(#FFF,#EAEAEA) repeat scroll 0 0 transparent;
    -webkit-appearance: initial;
}
.select-gradient-one select {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 4% 0;
    padding: 0 5%;
    line-height: 2em;
    font-family: "HelveticaCn";
    font-size: 0.928em;
    text-align: center;
    text-decoration: none;
    color: #807e7e;
    border: 1px solid #d3d3d3;
    border-radius: 0.2em;
    background: none;
    background: #eaeaea;
    background: -moz-linear-gradient(top,#fff 0,#eaeaea 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#eaeaea));
    background: -webkit-linear-gradient(top,#fff 0,#eaeaea 100%);
    background: -o-linear-gradient(top,#fff 0,#eaeaea 100%);
    background: -ms-linear-gradient(top,#fff 0,#eaeaea 100%);
    background: linear-gradient(to bottom,#fff 0,#eaeaea 100%);
    background: linear-gradient(#fff,#eaeaea);
    padding: 2% 5%;
    font-family: "Arial",sans-serif;
}

And… this is another case… of -webkit-appearance

Firefox left, Safari right

If they had -moz-appearance: initial or none this will work.

.lm-form select, .lm-form .combo-box {
    font-size: 1em;
    min-height: 2.08em;
    border: 1px solid #D3D3D3;
    background: linear-gradient(#FFF,#EAEAEA) repeat scroll 0 0 transparent;
    -webkit-appearance: initial;
    -moz-appearance: initial;
}

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

[karlcow]

ok let's start. There are a couple of issues with Leroy Merlin Web site.

I wonder if @steedM can help us find the right persons working for @Leroy-Merlin-France (I wish this account was more active :) like @leroy-merlin-br )

[adamopenweb]

Reaching out for multiple Leroy Merlin bugs to Fernando Freire, Manager IT Program & Applications at Leroy Merlin via LinkedIn. https://www.linkedin.com/in/fernandofreire/

[adamopenweb]

No luck there.

Trying to reach Pascal Malfoy - Global leader Developement and Innovation chez ADEO https://www.linkedin.com/in/pascal-malfoy-148912b/

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

More specifically, I'd like to confirm that when run in Nightly the site is still broken when the pref layout.css.webkit-appearance.enabled set to false, but fixed when it's set to true.

[softvision-oana-arbuzov]

@jwatt , the issue seems to be fixed regardless if layout.css.webkit-appearance.enabled is false or true.

Tested with: Browser / Version: Firefox Nightly 63.0a1 (2018-07-12) Operating System: Huawei P10 (Android 7.0) - 1080 x 1920 pixels (~432 ppi pixel density), Samsung Galaxy S7 Edge (Android 7.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)

Closing the issue as Fixed.

[jwatt]

@softvision-oana-arbuzov thanks!

[karlcow]

The markup is now

<p class="lmInput">
  <label for="codeMagasin">Magasin * </label>
  <span class="select-gradient-one" role="listbox">
    <select name="codeMagasin" id="codeMagasin" required="">
      <option value="">Sélectionnez...</option>
      <optgroup class="green" label="01 AIN">
        <option value="167">Thoiry</option>
      </optgroup>

      <!-- … cut for clarity … -->

    </select>
    <i class="ico-arrow-bottom-light" aria-hidden="true"></i>
  </span>
</p>

And they added -moz-appearance: none it's why it has been fixed.

.select-gradient-one select {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 4% 0;
    padding: 0 5%;
    line-height: 2em;
    font-size: 0.928em;
    text-align: center;
    text-decoration: none;
    color: #807e7e;
    border: 1px solid #d3d3d3;
    border-radius: 0.2em;
    background: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #eaeaea;
    background: -moz-linear-gradient(top,#fff 0,#eaeaea 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#eaeaea));
    background: -webkit-linear-gradient(top,#fff 0,#eaeaea 100%);
    background: -o-linear-gradient(top,#fff 0,#eaeaea 100%);
    background: -ms-linear-gradient(top,#fff 0,#eaeaea 100%);
    background: linear-gradient(to bottom,#fff 0,#eaeaea 100%);
    background: linear-gradient(#fff,#eaeaea);
    padding: 2% 5%;
    font-family: "Arial",sans-serif;
}