www.essilor.com.br - "Browse" menu is not centered

[webcompat-bot]

URL: http://www.essilor.com.br

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

Problem type: Design is broken Description: the hamburger menu is broken, it's not centralized like in clock. Steps to Reproduce: Just touch the hamburger menu.

This is the Brazilian website of the world's largest eyeglasses' lens manufacturer, so it may be important to fix.

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, the issue is indeed reproducible.

Affected area:

<div class="menu" style="">
    <ul>
        <a class="btn" href="http://www.garantiacrizal.com.br">
            <li class="first">Garantia Estendida</li>
        </a>
        <a href="https://career5.successfactors.eu/sfcareer/">
            <li>Trabalhe Conosco</li>
        </a>
        <a href="http://www.essilorsolutions.com.br/">
            <li>Equipamentos</li>
        </a>
        <a href="imprensa.html">
            <li>Imprensa</li>
        </a>
    </ul>
</div>

Adding text-align: -moz-center;, the menu become centered and does not break in Chrome. Note: could also add text-align: -o-center for Opera and text-align: -ms-center for Internet Explorer.

.menu {
    z-index: 1000000;
    font-size: 0.8em;
    width: 100%;
    background: #ffffff;
    position: absolute;
    text-align: -webkit-center;
}

Tested with: Browser / Version: Firefox Mobile Nightly 60.0a1 (2018-03-06) Operating System: Google Pixel (Android 8.0.0) - 1080 x 1920 pixels (~441 ppi pixel density), Samsung Galaxy S7 Edge (Android 7.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)

@karlcow or @denschub , could you confirm this?

Moving to Needsdiagnosis for further investigation.

[denschub]

Good job with spotting that -webkit-center! :) Sadly, it's actually not that simple. While -moz-center exists, it does not exist for Opera and IE. The difference between center and -moz-center is relatively simple: the latter also centeres block elements, not just inline-elements. Their solution is kinda risky, and using a non-standard attribute is always not a good idea.

Note that we, in theory, could alias -webkit-center to -moz-center, as we already support some webkit-prefixed attributes. However, as Edge is not supporting it either and I have not seen it too much in the wild, I think the breakage is not high enough for us to justify an alias. Still, /cc @miketaylr just to get a second opinion.

The "nice" solution would be to replace the align with a simple text-align: center; and applying display: inline-block; to the <ul> below it. Visually, it will produce the same effect, but is less prone to breaking.

[miketaylr]

Still, /cc @miketaylr just to get a second opinion.

Thanks @denschub. I agree we should try outreach here, but also track -webkit-center usage going forward. I'll add a label, please stick it to issues as we find them.

[karlcow]

Would someone write in Portuguese? http://www.essilor.com.br/contato.html

[adamopenweb]

Reaching out via site contact form, with some help from: https://wiki.mozilla.org/Compatibility/StdLetters

[adamopenweb]

They have forwarded the issue to the appropriate team.

[softvision-oana-arbuzov]

The issue is still reproducible on my side.

Tested with: Browser / Version: Firefox Nightly 68.0a1 (2019-08-05), 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)

[ghost]

@denschub They've redesigned their site.

[denschub]

Thanks for noticing and reporting back!