Offcanvas - CSS transition bug on Android 4.1.x

Question

I'm trying to create a offcanvas menu similar to Google Plus app's one.

Basically, I have a code working on almost all devices (android/ios) and browsers (ff, chrome, IE8+)

The only problem I have is on a Samsung Galaxy Tab 3 running Android 4.1.2 : if I activate the opacity transition of the dark/opaque layer on the right, the offcanvas menu won't hide when closing the menu ... and it totally breaks my app.

See this two fiddles on Android 4.1.2 :

• doesn't work : http://jsfiddle.net/F3BPw/3/

• works but I disabled to opacity transition (which I need) : http://jsfiddle.net/F3BPw/2/

Related CSS code (SASS version here, CSS version on jsfiddle) :

ps: see the two transitions lines commented , the bug appears If I decomment them

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*/
        }
    }
}

Answer 1

Try avoiding multiple animations declarations like

transition: left 0.15s linear, opacity 0.15s linear;

Instead add a new nested element and give it the other animation.

Samsung default browser really doesn't do well with multiple animation (Until v4.0 Android was totally unable to handle this, nowadays Samsung browser still runs VERY old code).