[Slidebar] different result in mobile and desktop

[ziaratban]

https://jsfiddle.net/141xLqj1/
please open this example in your desktop browser . then open in your mobile browser.
z-index problem in mobile.
i think this problem is exists in user agent because when you active Request Desktop Site in mobile , everything ok.

[J-tt]

Reproduction

I succesfully reproduced this bug, with no modifications to the provided jsfiddle.
The error was reproduced succesfully on Firefox with a custom User Agent, and did not occur when the User Agent was not active.

Package	Version
Semantic UI	2.2.10
JQuery	3.1.1

Screenshots

Firefox - Mobile screen size, no custom user agent

Firefox - Mobile screen size, User Agent: Mozilla/5.0 (Linux; Android 4.0.4; Galaxy Nexus Build/IMM76B) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.133 Mobile Safari/535.19

Analysis

The button in the toggled nav is positioned beneath the button on the z-layer, and I was able to bring it to the front using: z-index: 99. The issue is definitely related to user agent, and with further inspection of the CSS, when the user agent is mobile the below style is active, and overwrites the correct one.

Dominant style with mobile user agent

.ui.uncover.sidebar {
    z-index: 1;
}

Dominant style with desktop user agent

.ui.overlay.sidebar {
    z-index: 102;
}

Conclusion

This issue is quite detrimental to semantic-ui as it would heavily affect users with navbars. The fix seems relatively simple, as the code applying the conflicting style can be isolated and then patched/removed.

@Banandrew @abolfazl-ziaratban

Edited for clarity

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.