world.kano.me - design is broken

[reinhart1010]

URL: https://world.kano.me/

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

Problem type: Design is broken
Description: The "Sign Up" and "Log In" buttons overlap the Close button
Steps to Reproduce:
Simply tap the Menu button from the website
This problem is clearly shown on smaller devices.

From webcompat.com with ❤️

[adamopenweb]

Thanks for the report @reinhart1010! I can reproduce this issue in Firefox desktop but not in Chrome.

At first glance the z-index on the menu for login and sign up stands out:

.kano-user-menu-1 {
    position: relative;
    z-index: 100;
}

And the overlay with the close button:

.overlay.kano-nav {
    background-color: rgba(0,0,0,.6);
    display: block;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 80;
}

[wisniewskit]

You're right, @adamopenweb, this is related to z-indices. Firefox and Edge are doing what the site is telling the browser to do, but Chrome and Safari seem to not apply z-indices as expected on non-HTML elements (like <kano-user-menu>).

I've filed Chrome bug 764458 to gain some insight here.