Cliff Li Cliff Li - 8 days ago 4
CSS Question

Element invisible in android mobile browser

enter image description here
Issue happen in every mobile browser except firefox. In windows Chrome devtools mode and enable device toolbar this issue happen.
I found another question in stackoverflow probably same isssue.
element invisible in mobile chrome and safari
Did anyone encounter the bug? How to fix it?
It is great appreciate if someone give me any hints.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<title>Demo</title>
<meta name="keywords" content="Demo">
<meta name="description" content="Demo">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<style type="text/css">
.sidebar .subclass > li > a {
display: block;
}
/* topbar */
.sideview .topbar {
height: 48px;
position: fixed;
top: 0px;
right: 0px;
background-color: #00a6ae;
padding: 0px;
margin: 0px;
text-align: right;
z-index: 1000;
}
/* sidebar */
.sideview .sidebar {
position: fixed;
top: 48px;
bottom: 0px;
left: 0px;
background-color: #666666;
overflow: hidden;
padding: 0px;
margin: 0px;
z-index: 1000;
}
.sideview .sidebar > li {
line-height: 42px;
}
.sideview .sidebar > li.on {
background-color: #777;
}
.sideview .sidebar a:link,
.sidebar a:hover,
.sidebar a:visited,
.sidebar a:active {
color: #FFF;
text-decoration: none;
}
.sideview .sidebar > li:hover {
background-color: #777;
cursor: pointer;
}
.sideview .sidebar .nav-icon {
width: 50px;
display: inline-block;
text-align: center;
color: #FFF;
}
.sideview .sidebar .nav-title {
width: 130px;
display: inline-block;
text-align: left;
color: #FFF;
}
.sideview .sidebar > li > ul.on {
transition: width 1s;
width: 180px;
}
/* subclass */
.sideview .sidebar .subclass {
transition: width 1s;
width: 0px;
position: fixed;
top: 48px;
bottom: 0px;
background-color: #DDD;
z-index: 1000;
padding: 0px;
overflow: hidden;
}
.sideview .sidebar .subclass:hover {
z-index: 1010;
cursor: default;
}
.sideview .sidebar .subclass .subclass-title {
text-align: left;
padding-left: 16px;
padding-right: 0px;
cursor: default;
background-color: #777;
color: #FFF;
height: 42px;
overflow: hidden;
}
.sideview .sidebar .subclass .subclass-title i {
line-height: 42px;
width: 42px;
text-align: center;
cursor: pointer;
float: right;
}
.sideview .sidebar .subclass > li {
margin: 0px;
text-align: right;
color: #666;
cursor: pointer;
}
.sideview .sidebar .subclass > li.on {
background-color: #eeeeee;
}
.sideview .sidebar .subclass a:link,
.sideview .sidebar .subclass a:hover,
.sideview .sidebar .subclass a:visited,
.sideview .sidebar .subclass a:active {
color: #666;
padding-right: 15px;
}
.sideview .sidebar .subclass > li:hover {
background-color: #eeeeee;
margin: 0px;
}
.sideview .header {
width: 50px;
height: 48px;
background-color: #fb8632;
position: fixed;
left: 0px;
top: 0px;
}
.sideview .header h1 {
margin: 0px;
text-align: center;
}
.sideview .header h1:after {
content: " ";
display: block;
width: 40px;
height: 30px;
margin-top: 9px;
margin-left: 5px;
background-image: url(../images/logoa.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.sideview .topbar {
left: 50px;
}
.sideview .sidebar {
width: 50px;
}
.sideview .sidebar > li:hover .nav-title {
display: block;
}
.sideview .sidebar .nav-icon {
width: 50px;
display: inline-block;
text-align: center;
color: #FFF;
}
.sideview .sidebar .nav-title {
width: 130px;
background-color: #777;
text-align: left;
position: fixed;
left: 60px;
margin-top: -42px;
padding-left: 10px;
display: none;
z-index: 1000;
color: #FFF;
}
.sideview .sidebar .nav-title:before {
width: 0px;
height: 0px;
border: 8px transparent solid;
border-right-color: #777;
position: absolute;
top: 14px;
left: -16px;
content: "";
}
.sideview .sidebar .subclass {
left: 50px;
}
.sideview #layout {
transition: padding-left 1s;
margin-top: 48px;
margin-right: 0;
margin-bottom: 0;
margin-left: 50px;
padding-left: 0px;
position: relative;
}
.sideview #layout.shrink {
transition: padding-left 1s;
margin-left: 50px !important;
padding-left: 180px;
}
/*------------------------------------ nav end ----------------------------------*/
</style>
</head>
<body class="sideview">
<div id="pagewrap">
<div class="header">
</div>
<div class="nav">
<ul class="topbar">
</ul>
<ul class="sidebar">
<li class="on"><span class="nav-icon">H</span><span class="nav-title">Home</span></li>
<li><span class="nav-icon">U</span><span class="nav-title">Usage</span>
<ul class="subclass">
<div class="subclass-title"><i> < </i> Usage</div>
<li><a href="sample/aui_text.html" ></span>Text</a></li>
<li><a href="#" ></span>Form</a></li>
<li><a href="#" ></span>Form extension</a></li>
<li><a href="#" ></span>Table</a></li>
<li><a href="#" ></span>Panel</a></li>
<li><a href="#" ></span>Tab</a></li>
<li><a href="#" ></span>Modual</a></li>
</ul>
</li>
<li><span class="nav-icon">S</span><span class="nav-title">Sample</span>
<ul class="subclass">
<div class="subclass-title"><i> < </i> Sample</div>
<li><a href="sample/aui_dashboard.html" ></span>Infomation</a></li>
<li><a href="#" ></span>Message</a></li>
<li><a href="#" ></span>User</a></li>
<li><a href="#" ></span>Feedback</a></li>
<li><a href="#" ></span>Article</a></li>
<li><a href="#" ></span>list</a></li>
<li><a href="#" ></span>Boxes</a></li>
</ul>
</li>
</ul>
</div>

<div id="layout" class="layout-c" style="background-color:#FFF;">
<div class="main">
<div id="mainview" class="mainview" style="padding: 15px;">
<!-- start -->

<div class="panel panel-default">
<div class="panel-body" id="text-01">
<h1>h1. Header heading <small>Secondary text</small></h1>
<h2>h2. Header heading <small>Secondary text</small></h2>
<h3>h3. Header heading <small>Secondary text</small></h3>
<h4>h4. Header heading <small>Secondary text</small></h4>
<h5>h5. Header heading <small>Secondary text</small></h5>
<h6>h6. Header heading <small>Secondary text</small></h6>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
</div>
</div>

<!-- end -->
</div>
</div>
</div>
</div>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script>
// shrink subclass(sub-menu)
$(".subclass-title").click(function(){
$(".subclass").removeClass("on");
$("#layout").removeClass("shrink");
});
// spread out subclass(sub-menu)
$(".nav-icon, .nav-title").click(function(){
$(".sidebar>li").removeClass("on"); //清除点击状态
$(this).parent().addClass("on"); //点击状态保留
$(".sidebar>li>.subclass").removeClass("on"); //全部子菜单隐藏
$("#layout").removeClass("shrink"); //主要内容区域恢复展开
if($(this).nextAll(".subclass").length && $(this).nextAll(".subclass").length>0){ //判断是否有子菜单
$(this).nextAll(".subclass").addClass("on"); //显示子菜单
$("#layout").addClass("shrink"); //主要内容区域收缩
};
});
// sidebar二级菜单点击保留状态
$(".sidebar .subclass>li").click(function(){
$(".subclass>li").not(".subclass-title").removeClass("on");
$(this).not(".subclass-title").addClass("on");
$(this).parent().addClass("on"); //由topview切换到sideview时保证二级菜单显示
$(".sidebar>li").removeClass("on"); //父元素同级元素清除状态
$(this).parent().parent().addClass("on"); //父元素状态保留

});
// zoom layout element
$(".zoom").click(function(){
if($("#layout").hasClass("zoom-enlarge")){
$("#layout").removeClass("zoom-enlarge");
}
else {
$("#layout").addClass("zoom-enlarge");
};
}
);
</script>
</body>
</html>

XYZ XYZ
Answer

This happens because you have given an overflow: hidden to the sidebar.In smaller screen it is creating the problem.Try it like this and check if the issue is solved

.sideview .sidebar {
    position: fixed;
    top: 48px;
    bottom: 0px;
    left: 0px;
    background-color: #666666;
    /* overflow: hidden; */
    padding: 0px;
    margin: 0px;
    z-index: 1000;
}