Web-bugs: www.unime.it - "Region" button design is broken

[tGstep]

URL: https://www.unime.it/it

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

Problem type: Design is broken
Description: Items are misaligned
Steps to Reproduce:
Some menu (three bars) items are overlapped too. On chromium based browsers it works.

View the screenshot

Browser Configuration

• gfx.webrender.all: false
• gfx.webrender.blob-images: true
• gfx.webrender.enabled: false
• image.mem.shared: true
• buildID: 20200811133449
• channel: beta
• hasTouchScreen: true

_From webcompat.com with ❤️_

[softvision-oana-arbuzov]

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

Note: The issue is not reproducible on Chrome.

Affected area:

<div class="region region-language">
    <div id="block-block-10" class="block block-block block-en first last odd">
        <p class="EN">
            <a href="https://international.unime.it" target="_blank" class="ext" rel="noopener noreferrer">EN
                <span class="ext" aria-label="(link is external)"></span>
            </a>
        </p>
    </div>
</div>

Tested with:
Browser / Version: Firefox Nightly 200827 (🦎 81.0a1-20200820093209)
Operating System: Huawei P20 Lite (Android 8.0.0) - 1080 x 2280 pixels, 19:9 ratio (~432 ppi density), Samsung Galaxy S6 Edge (Android 7.0) - 1440 x 2560 pixels (~577 ppi pixel density)

Moving to Needsdiagnosis for further investigation.

[ksy36]

I've created a reduced test case https://codepen.io/ksy36/pen/bGpWMoM. Looks like float with margin-left combination makes overflow-wrap: break-word break the word in Firefox. That doesn't happen in Chrome though. @jfkthame , do you have an idea whether Firefox behaviour is correct here?

[jfkthame]

The issue is specifically because of the use of margin-left: 25%, which doesn't interact well with shrink-wrapping the float. This layout is quite fragile in Chrome as well; e.g. if you increase the margin-left to 50%, it breaks similarly; or if you increase the font-size of .wrapper to 50px, it breaks; or if you reduce the padding-right on .ext to 3px, it breaks.

None of this would be a problem if they expressed the margin in absolute units such as px, or in em if they want it font-relative (e.g. replace margin-left: 25%; with margin-left: 0.75em or something like that).

Reduced testcase that illustrates the difference between a percent-based margin and an absolute one in this situation (for both Firefox and Chrome): https://codepen.io/jfkthame/pen/MWymXWW

Having said that, it's not clear to me exactly why the behaviors are slightly different here on the original example. Something to do with the trailing span that has padding-right etc.? It should be possible to come up with a further-reduced testcase that identifies exactly what triggers the difference, and then we could try to figure out which is more correct.