I am attempting to develop an offcanvas menu similar to the one featured in the Google Plus app.
Currently, my code functions properly on most devices (android/ios) and browsers (ff, chrome, IE8+).
The only issue I am encountering is on a Samsung Galaxy Tab 3 running Android 4.1.2: when I enable the opacity transition of the dark/opaque layer on the right, the offcanvas menu fails to hide upon closing, causing a disruption in my application.
You can observe this problem in action on two fiddles with Android 4.1.2:
does not work: http://jsfiddle.net/F3BPw/3/
works but with disabled opacity transition (which is essential): http://jsfiddle.net/F3BPw/2/
Here is the relevant CSS code (SASS version below, CSS version on jsfiddle):
(PS: The issue arises if you uncomment the two transition lines)
html, body {
overflow-x: hidden;
/*height: 100%;*/
}
.sidebar-offcanvas {
height: 100%;
position: absolute;
}
a[data-toggle=offcanvas]:focus {
outline: none;
}
$global-site-min-height: 520px; /*TODO: replace this by better css or JS*/
#sidebar {
padding-left: 0;
padding-right: 0;
min-height: $global-site-min-height;
background-color: lighten($gray-light, 30%);
.left-sidebar {
padding: 0 15px;
}
}
#rightpanel {
height: 100%;
min-height: $global-site-min-height;
padding-left: 0;
padding-right: 0;
}
.wrapper {
overflow: hidden;
}
.row-offcanvas {
position: relative;
}
@media screen and (max-width: $screen-xs-max) {
$sidebar-width: 40%;
#togleSidebar {
display: block;
}
.sidebar-offcanvas {
@include transition(left 0.15s linear, opacity 0.15s linear);
height: 100%;
z-index: 9500;
top: 0;
width: $sidebar-width;
left: -$sidebar-width;
}
#rightpanel-shadow {
background: #000 !important;
position: absolute;
width: 100%;
height: 100%;
visibility: hidden;
@include opacity(0);
z-index: 9250;
@include transition(opacity 0.15s linear); /* SECOND FIDDLE WORKS IF COMMENTED*/
}
.active {
.sidebar-offcanvas {
left: 0;
@include box-shadow(6px 0px 6px -2px #111111);
@include transition(left 0.15s linear, opacity 0.15s linear);
}
#rightpanel-shadow {
visibility: visible;
@include opacity(0.75);
transition-delay: 0s;
zoom: 1;
@include transition(opacity 0.15s linear); /* SECOND FIDDLE WORKS IF COMMENTED*/
}
}
}