title: Android Chrome fixed menu popping in and out with url disappearing
body: <p>EDIT: Here's a Youtube video that illustrates my problem:
  <a href="http://youtu.be/OguwjZR_GdU" rel="nofollow">http://youtu.be/OguwjZR_GdU</a></p>
  
  <p>On my website <a href="http://www.blackstaropal.com" rel="nofollow">Black Star Opal</a> I've been trying to implement a sticky menu, much like this one <a href="http://www.danskkids.com.au" rel="nofollow">Dansk Kids</a>. I looked at the Dansk Kids website javascript and CSS: there seems to be no javascript involved in their menu (other than the removal of the logo underneath their sticky menu when they scroll). I want my sticky menu to be as smooth as theirs if possible (ie staying flush with the url bar as it pops in and out).</p>
  
  <p>Here's my css for #carttrans, the menu div:</p>
  
  <pre><code>position: fixed;
  -webkit-backface-visibility: hidden;
  height: 49px;
  top: 0px;
  left: 0px;
  background-color: rgb(255, 255, 255);
  width: 100% !important;
  z-index: 10000;
  text-align: center;
  margin-left: 0px;
  padding-left: 7px;
  border: 1px solid rgb(221, 221, 221);
  border-left: none;
  border-right: none;
  border-bottom-style: solid !important;
  border-bottom-width: 1px !important;
  border-bottom-color: rgb(221,221,221) !important;
  -webkit-transform: translateZ(0);
  </code></pre>
  
  <p>I also use this js code (only because the menu wouldn't display on iOS Safari without it, although I'm unsure why):</p>
  
  <pre><code>$(function() {
  // grab the initial top offset of the navigation 
  var sticky_navigation_offset_top = $('#carttrans').offset().top;
  
  // our function that decides weather the navigation bar should have "fixed" css position or not.
  var sticky_navigation = function(){
  var scroll_top = $(window).scrollTop(); // our current vertical position from the top
  
  if ($(window).width() &lt; 500)
  {
    // if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
    if (scroll_top &gt; sticky_navigation_offset_top) { 
    $('#carttrans').css({ 'position': 'fixed', 'top':0, 'left':0 });
    } else {
    $('#carttrans').css({ 'position': 'fixed' }); 
    }   
  }
  };
  
  // run our function on load
  sticky_navigation();
  
  // and run it again every time you scroll
  $(window).scroll(function() {
    sticky_navigation();
  });
  });
  </code></pre>
  
  <p>I even removed all the elements in the menu and just left the blank white bar there to see if it would do the same thing. It popped in and out awkardly just like before.</p>
  
  <p>Any help with this would be amazing.</p>
  
  <p>EDIT: As I said below, it's the URL bar popping in and out that seems to be disturbing my sticky menus. It could possibly be a repaint issue or slow down, because on other sites the disappearance of the url bar and the subsequent movement of the menu (for example, on sticky menu demos) is quite smooth and I'm doing/have tested them with the same url bar popping.</p>
  
  <p>Cheers,
  Rob</p>