www.transfermarkt.de - The country flag overlaps the site's logo

[webcompat-bot]

URL: https://www.transfermarkt.de/

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

Problem type: Design is broken
Description: language selection at the top is broken (logos interfering with each other)
Steps to Reproduce:

Browser Configuration

• None

From webcompat.com with ❤️

[cipriansv]

Thanks for the report,
I was indeed able to reproduce the issue. The flag from the dropdown overlaps the site logo.

Tested with:
Browser / Version: Chrome Mobile 74.0.3729.157, Firefox Fenix 1.0.1921
Operating System: Huawei P10 (Android 8.0) - 1080 x 1920 pixels (~432 ppi pixel density)

The issue is also reproducible on Firefox Nightly Mobile 68.0a1 (2019-05-17)

This is the web page displayed in Firefox Fenix:

This is the web page displayed in Firefox Nightly:

And this is the web page displayed in Chrome:

[ksy36]

This is happening since @-moz-document url-prefix() is not supported in both Nightly and Fenix.

Setting layout.css.moz-document.url-prefix-hack.enabled to true makes it behave the same as in Firefox release/Chrome. So this is related to Bug #1449753

In this stylesheet there is a following rule being applied to the logo <a id="logo_klein"...>:

@-moz-document url-prefix() {
  #logo_klein {
    left: 70px;
    top: 9px; 
  }
}

for Nightly and Fenix it's not being applied so the logo element shifts slightly to the right.

As for the rules that are being applied in regards to positioning of the logo:

#logo_klein {
  zoom: 0.5;
  -moz-transform: scale(0.51);
  -moz-transform-origin: -60px -6px;
  border: 1px solid #fff;
  position: absolute;
  left: 80px;
  top: 13px;
  overflow: hidden; 
}

It's hard to tell why this combination of rules was used, but to make the site work correctly in all browsers I would suggest trying the following:

• dropping -moz-transform and moz-transform-origin
• replace zoom with transform:scale(0.51) , since zoom is considered a non-standard css property.
• adjust positioning (possibly left: 0; top: -10px;)

Will move it to needs contact

[cipriansv]

After retesting the issue I confirm that the issue has been fixed.

Tested with:
Browser / Version: Firefox Nightly 200819(🦎 81.0a1-20200814094524)
Operating System: OnePlus6 (Android 10) - 1080 x 2280 pixels (~402 ppi pixel density)

Closing the issue as fixed.