title: Android browser (not Chrome, not all versions) has weird problems with z-index, absolute positioning
body: <p>There are a few bugs I've seen logged about the Android browser and how it deals with absolutely-positioned "shroud" elements commonly used for modal dialogs. <a href="http://jsbin.com/ofigat/3" rel="nofollow">Here is a <strong>jsbin</strong> example.</a>.  Clicking the "show" button on a reasonable browser should show a little box with an "Ok" button.  The HTML:</p>
  
  <pre><code>  &lt;div id=content&gt;
      &lt;button type=button&gt;Show&lt;/button&gt;
      &lt;p&gt;
      This is the contents of the page.
      &lt;p&gt;
      This is the contents of the page.
      &lt;p&gt;
      This is the contents of the page.
      &lt;p&gt;
      This is the contents of the page.
      &lt;p&gt;
      This is the contents of the page.
      &lt;p&gt;
      This is the contents of the page.
      &lt;p&gt;
      This is the contents of the page.
  &lt;/div&gt;
  
  &lt;div id=shroud&gt;
  &lt;/div&gt;
  &lt;div id=frame&gt;
      This is a frame.
      &lt;button type=button&gt;Ok&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The JavaScript just hides and shows the "frame" <code>&lt;div&gt;</code>:</p>
  
  <pre><code>$(function() {
    $('body')
      .on('click', '#content button', function(ev) {
        ev.preventDefault();
        $('#frame, #shroud').show();
      })
        .on('click', '#frame button', function(ev) {
          ev.preventDefault();
          $('#frame, #shroud').hide();
        });
  });
  </code></pre>
  
  <p>And the CSS is just some simple positioning. The main content, the shroud, and the frame all have "z-index" values to explicitly stack them.</p>
  
  <pre><code>* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  button {
    font-size: 18px;
    font-weight: bold;
    color: rgb(20,24,42);
    background-color: yellow;
    border-radius: 5px;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  }
  
  #frame {
    background-color: #e2f0fa;
    height: 100%;
    z-index: 0;
  }
  
  #shroud {
    display: none;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    z-index: 10;
    background-color: rgba(0,0,0,0.4);
  }
  
  #frame {
    display: none;
    position: absolute;
    top: 50px; left: 20px;
    width: 200px; height: 200px;
    border: 2px solid #336699;
    border-radius: 10px;
    background-color: #f0f2f9;
    padding: 20px;
    z-index: 20;
  }
  </code></pre>
  
  <p>So the problem I noticed on Android 4.0.3 and 4.1 is that the little "frame" box just doesn't show up at all.  The shoud <code>&lt;div&gt;</code> does, and <em>sometimes</em> I can "wiggle" the page with my finger and the frame box shows up, sometimes partially, and (I think) always <em>under</em> the shroud, even though its "z-index" is larger.</p>
  
  <p>Now I'm not sure why anybody would use the Android browser on a newer device supported by Chrome, but somebody might I guess.  Has anybody else seen this?  I haven't even found a similar bug report; I've seen stuff about older versions having goofy problems with input elements "bleeding through" overlaying elements, but nothing like this.</p>
  
  <p>I've tried that test page with some older 2.2 and 2.3 phones and it works fine. My HTC One X and my Nexus 7 however both fail.</p>