Translate3d with fixed element (Android2 version)

Fixed elements within translated elements become static. This is not a mobile bug as chrome on desktop does this as well. The translation needs to take place separately for the fixed and the non-fixed elements. Note:translating fixed elements does not work in android2. Use left/right instead of translate3d.

by vishl

HTML

<div id="menu">
    Cool slidy menu!
</div>
<div id="container">
    <div id="topbar" class="slide"><a id="menu-button">Menu</a>This is a topbar</div>
    <div id="wrapper" class="slide">
  <ul>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
  </ul>
    </div>
</div>

CSS

#container{
    width:100%;
    position:absolute;
    left:0px;
    top:0px;
}

#wrapper{   
    position:relative;
    background:white;
    padding:5px;
}
.slide{
    -webkit-transition:all .2s linear;
    
}

#container.active .slide{
    left:85%;
}

#menu-button{
    float:left;
    line-height:20px;
    margin:10px;
    padding:10px;
    background:#555;
    color:white;
}

#topbar{
    position:fixed;
    width:100%;
    top:0px;
    left:0px;
    line-height:65px;
    background:#ddd;
    text-align:center;
    z-index:1; /*for some reason we need a z index now*/
}

body{
    background:#333;
}

#menu{
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    color:white;
}

</style>

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<style>

JavaScript

$(function(){
    $('#menu-button').click(function(){$('#container').toggleClass('active');});
});