Web-bugs: www.decathlon.ch - Swiss logo is displayed too large

[webcompat-bot]

URL: https://www.decathlon.ch/

Browser / Version: Firefox Mobile 68.0
Operating System: Android
Tested Another Browser: No

Problem type: Design is broken
Description: Swiss logo too big
Steps to Reproduce:

Browser Configuration

• None

_From webcompat.com with ❤️_

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue.

Affected area:

<div class="switchstore">
    <div class="switchstore__language">
        <span>FR</span>
        <a href="#" class="flag current flag-CH"></a>
        <input type="hidden" id="textFAQ" value="Demander conseil !">
            <div class="flag-stores ">
                <a href="https://www.decathlon.ch/ch_fr/?___from_store=ch_fr" class="flag flag-FR">
                    <span>FR</span>
                </a>
                <br>
                    <a href="https://www.decathlon.ch/ch_de/?___from_store=ch_fr" class="flag flag-DE">
                        <span>DE</span>
                    </a>
                    <br>
                        <a href="https://www.decathlon.ch/ch_en/?___from_store=ch_fr" class="flag flag-EN">
                            <span>EN</span>
                        </a>
                        <br>
                            <a href="https://www.decathlon.ch/ch_it/?___from_store=ch_fr" class="flag flag-IT">
                                <span>IT</span>
                            </a>
                            <br>
                            </div>
                        </div>
                    </div>

Note:

1. Also reproducible on Firefox Nightly and RDM.
2. Not reproducible on Chrome.

Tested with:
Browser / Version: Firefox Nightly 68.0a1 (2019-07-30), Fenix 1.1.0 (Build #12042112) 📦: 4.0.1 🦎: 68.0-20190711090008
Operating System: LG G5 (Android 8.0.0) - 1440 x 2560 pixels (~554 ppi pixel density), Samsung Galaxy S7 Edge (Android 8.0.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)

Moving to Needsdiagnosis for further investigation.

[wisniewskit]

They are doing things very strangely here to make the cross-shape, relying on the non-standard CSS zoom to pretend the image is 310px/210px layout-wise, while zooming it down in size:

.switchstore .flag-CH {
  width: 310px;
  height: 210px;
  background-color: #c8102e;
  zoom: .1;
  margin-left: -30px;
  border-left: 50px solid #c8102e;
  border-right: 50px solid #c8102e;
  background-image: linear-gradient(180deg,#c8102e 0,#c8102e 41px,rgba(0,0,0,0) 41px),linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,0) 179px,#c8102e 179px,#c8102e 220px,rgba(0,0,0,0) 220px,rgba(0,0,0,0) 100%),linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0) 179px,#c8102e 179px,#c8102e 220px,rgba(0,0,0,0) 220px,rgba(0,0,0,0) 100%),linear-gradient(90deg,#c8102e 0,#c8102e 41px,rgba(0,0,0,0) 41px),linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0) 89px,#fff 89px,#fff 131px,rgba(0,0,0,0) 131px,rgba(0,0,0,0) 100%),linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,0) 89px,#fff 89px,#fff 131px,rgba(0,0,0,0) 131px,rgba(0,0,0,0) 100%);
}

I have no idea why they aren't just dividing all of the px values by 10 in their CSS instead, but that's the easiest way for them to avoid using a non-standard property:

.switchstore .flag-CH {
  width: 31px;
  height: 21px;
  border-left: 5px solid #c8102e;
  border-right: 5px solid #c8102e;
  background-image: linear-gradient(180deg,#c8102e 0,#c8102e 4.1px,rgba(0,0,0,0) 4.1px),linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,0) 17.9px,#c8102e 17.9px,#c8102e 22.0px,rgba(0,0,0,0) 22.0px,rgba(0,0,0,0) 100%),linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0) 17.9px,#c8102e 17.9px,#c8102e 22.0px,rgba(0,0,0,0) 22.0px,rgba(0,0,0,0) 100%),linear-gradient(90deg,#c8102e 0,#c8102e 4.1px,rgba(0,0,0,0) 4.1px),linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0) 8.9px,#fff 8.9px,#fff 13.1px,rgba(0,0,0,0) 13.1px,rgba(0,0,0,0) 100%),linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,0) 8.9px,#fff 8.9px,#fff 13.1px,rgba(0,0,0,0) 13.1px,rgba(0,0,0,0) 100%)
}

So this is a dupe of bz-390936, but the site can quite trivially fix it.

[ksy36]

This looks like a candidate for an intervention. There are some other elements that require a similar change. Here is EN link strangely stands out:

[ksy36]

I've looked it it again to see if I can add an intervention. It's not reproducible on Fenix for me, but reproducible in Firefox Nightly on desktop:

It's working on Firefox release since they have:

@-moz-document url-prefix() {
    .switchstore {
        width: 4em!important
    }

    .switchstore .flag.current {
        transform: scale(.15) translate(-220%,-295%)
    }

    .switchstore .flag-CH,.switchstore .flag-DE,.switchstore .flag-FR,.switchstore .flag-IT,.switchstore .flag-LT,.switchstore .flag.flag-EL,.switchstore .flag.flag-EN,.switchstore .flag.flag-GR {
        position: fixed!important
    }

    .switchstore .flag.flag-EN {
        margin-top: 8px;
        margin-left: 4px!important
    }
}

So I guess it's https://bugzilla.mozilla.org/show_bug.cgi?id=1449753
I'll try to reach out to the site to see if they can implement Thomas's suggestion.

[ksy36]

There is @Decathlon developers on github. So maybe Laurent could help us. Hi @lauthieb, would you be able to pass this information to the relevant team?

[lauthieb]

Hi everyone!
Thanks a lot for this bug report.
I will transfer this issue to the revelant team.

[lauthieb]

Hello all!
The bug has just been fixed by the team Decathlon Switzerland, thank you again for your help!

[cipriansv]

I retested the issue and it is still reproducible on my side on Firefox Nightly desktop.

Tested with:
Browser / Version: Firefox Nightly 71.0a1 (2019-09-04)
Operating System: Windows 10 Pro

[wisniewskit]

This no longer reproduces for me, and the CSS indeed seems to be changed appropriately. Thanks!

[softvision-oana-arbuzov]

They did some fixing related to the size, but now the logo on Firefox Nightly mobile is very small.

Since it is not reproducible on Firefox Preview Nightly I will no longer open it.

Thanks for the report, but I'm not able to reproduce the issue.

Tested with:
Browser / Version: Firefox Nightly 68.2a1 (2019-10-22), Firefox Preview Nightly 191023 (🦎: 71.0a1-20191021095628)
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)

[lock[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue at https://webcompat.com/issues/new if you are experiencing a similar problem.