CSS3 Menu will not toggle in webview on android

Issue

I am implementing the following code in a phonegap/cordova app. Unfortunately I run into some problems with webview on android. In webview, it seems to not toggle open the menu through the check box. It does however work in chrome on android. Another possibility is the css3 transitions/transforms are not compatible in webview. If anyone with more knowledge and experience can point out what is causing the menu not to fire in web view or knows a possible solution I would appreciate it.

JSFIDDLE: http://fiddle.jshell.net/nicooprat/Aahqh/

HTML

<input type="checkbox" name="handler-right" class="handler" id="handler-right" onclick="null" />
<input type="checkbox" name="handler-left" class="handler" id="handler-left" onclick="null" />

<div id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Our work</a></li>
        <li><a href="#" class="active">Our clients</a></li>
        <li><a href="#">Who are we ?</a></li>
        <li><a href="#">Get in touch</a></li>
    </ul>
</div>

<div id="favorites">
    <ul>
        <li><a href="#">Fav #1</a></li>
        <li><a href="#">Fav #2</a></li>
        <li><a href="#" class="active">Fav #3</a></li>
        <li><a href="#">Fav #4</a></li>
        <li><a href="#">Fav #5</a></li>
        <li><a href="#">Fav #6</a></li>
        <li><a href="#">Fav #7</a></li>
        <li><a href="#">Fav #8</a></li>
        <li><a href="#">Fav #9</a></li>
        <li><a href="#">Fav #10</a></li>
        <li><a href="#">Fav #12</a></li>
        <li><a href="#">Fav #13</a></li>
        <li><a href="#">Fav #14</a></li>
        <li><a href="#">Fav #15</a></li>
        <li><a href="#">Fav #16</a></li>
        <li><a href="#">Fav #17</a></li>
        <li><a href="#">Fav #18</a></li>
    </ul>
</div>

<div id="wrapper">
    <p id="button">
        <label for="handler-right" id="right" href="#">Open right →</label>
        <label for="handler-left" id="left" href="#">← Open left</label>
    </p>

    <div id="content">

        <p>Cras sed ante. Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.</p>

        <p>Cras sed ante. Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.</p>

        <p>Cras sed ante. Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.</p>

        <p>Cras sed ante. Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.</p>

        <p>Cras sed ante. Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.</p>

    </div>   
</div>

CSS

$blue: #336c95;
$transitionSpeed: .5s;
$menuOffset: 80%;

html , body {
    position: relative;
    width: 100%;
    height: 100%;
    font-family: "Helvetica", sans-serif;
    font-size: 15px;
    overflow: hidden;
}

#menu , #favorites {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: $menuOffset;
    z-index: 1;
    background: #333;
    overflow: auto;
    opacity: 0;
    -webkit-transition: opacity 0s $transitionSpeed;

    ul {
        display: block;
        height: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;

        li a {
            display: block;
            padding: 10px;
            border-bottom: 1px solid #222;
            color: #fff;
            text-shadow: 0 1px 0 #000;
            font-weight: bold;
            text-decoration: none;
            box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
            background: -webkit-linear-gradient(rgba(255,255,255,.02) 0%, rgba(0,0,0,.1) 100%);
            background: -moz-linear-gradient(rgba(255,255,255,.02) 0%, rgba(0,0,0,.1) 100%);

            &.active {
                background-color: $blue;
            }
        }
    }
}

#favorites {
    left: auto;
    right: 0;
}

.handler {
    display: none;

    &#handler-right:checked {

        & ~ #favorites {
            opacity: 1;
            -webkit-transition: opacity 0s 0s;
            -moz-transition: opacity 0s 0s;
        }

        & ~ #wrapper {
            -webkit-transform: translate3D(-$menuOffset,0,0);
            -moz-transform: translate3D(-$menuOffset,0,0);

            #content {
                overflow: hidden;
            }
        }
    }

    &#handler-left:checked {

        & ~ #menu {
            opacity: 1;
            -webkit-transition: opacity 0s 0s;
            -moz-transition: opacity 0s 0s;
        }

        & ~ #wrapper {
            -webkit-transform: translate3D($menuOffset,0,0);
            -moz-transform: translate3D($menuOffset,0,0);

            #content {
                overflow: hidden;
            }
        }
    }
}

#wrapper {
    position: relative;
    z-index: 2;
    background: #F5F5F5;
    height: 100%;
    box-shadow: 0 0 3px #000;
        -webkit-transform: translate3D(0,0,0);
        -moz-transform: translate3D(0,0,0);
    -webkit-transition: -webkit-transform $transitionSpeed ease-in-out;
    -moz-transition: -moz-transform $transitionSpeed ease-in-out;

    #button {
        height: 20px;
        padding: 10px;
        background: #eee;
        line-height: 20px;

        label {
            color: #666;
            text-transform: uppercase;
            text-decoration: none;
            cursor: pointer;

            &:hover {
                color: $blue;
            }

            &#right {
                float: right;
            }
        }
    }

    #content {
        padding: 10px;
        color: #666;
        line-height: 1.5em;
        font-size: .9em;
        font-weight: 300;
        position: absolute;
        top: 40px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;

        p:not(:last-child) {
            margin-bottom: 20px;
        }
    }
}

Solution

There is a bug with webkit adjacent/sibling selectors and pseudo classes that doesn't allow you to combine them on Android <= 4.1.2. The solution is to add a webkit-only fake animation to the body element:

body { 
    -webkit-animation: bugfix infinite 1s; 
}
@-webkit-keyframes bugfix { 
    from {padding:0;} 
    to {padding:0;} 
}

See the following StackOverflow thread: https://stackoverflow.com/a/8320736/1012875

Answered By - micjamking