www.leroymerlin.fr - "Search" icon is misaligned and very small in "Find a shop" section

[softvision-oana-arbuzov]

URL: https://www.leroymerlin.fr/v3/mobile/store/listStores.do Browser / Version: Firefox Mobile Nightly 55.0a1 (2017-05-24) 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/mobile/store/listStores.do
2. Observe “Search” icon from “Trouver un magasin” (“Find a shop”) section.

Expected Behavior: Search icon is centered and has fair size.

Actual Behavior: Search icon is misaligned (top side) and very small.

Note:

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

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

sv; country: fr

From webcompat.com with ❤️

[karlcow]

<div class="form-box">
    <div class="center" id="results">
        <div class="center over">
            <div id="search-input-container">
                <i class="ico-zoom" id="icoZoom"></i>
                <div class="awesomplete">
                    <div class="awesomplete">
                        <input name="codePostal" value=""
                            class="search-postal-code awesomplete"
                            id="search-postal-code" placeholder="Par ville, code postal, région..."
                            autocomplete="off" aria-autocomplete="list"
                            type="search">
                        <ul hidden=""></ul><span class="visually-hidden"
                            role="status" aria-live="assertive"
                            aria-relevant="additions"></span></div>
                    <ul
                        hidden=""></ul><span class="visually-hidden"
                            role="status" aria-live="assertive"
                            aria-relevant="additions"></span></div>
            </div>
            <div id="clsBtt">fermer <i class="ico-cross"></i></div>
        </div>
    </div>
</div>

This is using a icon-font.

.ico-zoom::before {
    font-family: "ico-lm";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    text-decoration: none;
    text-transform: none;
}
.ico-zoom::before {
    content: "\E08F";
}

and it relies on zoom for the size.

#search-input-container i {
    position: absolute;
    right: 6%;
    zoom: 1.5;
    margin-top: 3px;
    color: #cdcdcd;
    z-index: 3;
    background: white;
}

it can be fixed by using CSS transforms.

#search-input-container i {
    position: absolute;
    right: 7%;
    zoom: 1.5;
    margin-top: 3px;
    color: #cdcdcd;
    z-index: 3;
    background: white;
    transform-origin: 0 0;
    transform: scale(1.5);
}

[karlcow]

Adding a link to the CSS zoom bug. https://bugzilla.mozilla.org/show_bug.cgi?id=csszoom

[karlcow]

@Leroy-Merlin-France is on github, but no people added to their account like their counterpart in Brazil @Leroy-Merlin-br. And the most recent commit is from 2013 https://github.com/search?o=desc&q=org%3ALeroy-Merlin-France+%22leroy+merlin%22&s=committer-date&type=Commits

sniff sniff.

[karlcow]

@vdutat Do you know if Leroy Merlin site is made by an internal team or by an external company? Asking because you seem to have contributed code there.

[karlcow]

Some other possibilities to explore. contact.site.internet@leroymerlin.fr and http://www.businesslab.com/

[adamopenweb]

Another issue for this site #7072

[adamopenweb]

As per #7064, reaching out to the Manager IT Program & Applications at Leroy Merlin via LinkedIn.

[softvision-sergiulogigan]

The issue is still reproducible on my side.

Tested with: Browser / Version: Firefox Nightly 68.0a1 (2019-06-24) Operating System: OnePlus 6 (Android 9) - 1080 x 2280 pixels, 19:9 ratio (~402 ppi pixel density)

[softvision-oana-arbuzov]

The issue is still reproducible on Firefox Nightly 68.2a1 (2019-10-29) and partially fixed on Firefox Preview Nightly 191031 (🦎: 72.0a1-20191029093803) (icon is larger but still misaligned)

Tested with: Operating System: Huawei P20 Lite (Android 8.0.0) - 1080 x 2280 pixels, 19:9 ratio (~432 ppi density), Samsung Galaxy S7 Edge (Android 8.0.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)