title: Div is rendering as empty
body: <p>I have a page that looks like this:</p>
  
  <pre><code>&lt;html&gt;
      &lt;body&gt;
          &lt;div id="outer"&gt;
              &lt;div id="inner"&gt;
                  &lt;img width="300" height="250" src="someimage.jpg"/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The CSS styling is this:</p>
  
  <pre><code>*{
      margin:0px;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      -webkit-user-select: none;
      -webkit-touch-callout: none;
  }
  
  body {
      width:100%;
      height:100%;
      background:red;
      overflow:hidden;
  }
  
  #outer {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    overflow:hidden;
    border: 1px solid blue;
  }
  </code></pre>
  
  <p>I'm getting a lot of strange behavior:</p>
  
  <ol>
  <li>On the initial load of the webpage in a WebView, all I see is a blue line. It's like there's no image in the <code>inner</code> div.</li>
  <li>On the first refresh, the WebView will slowly expand to 100% height. It slowly reveals <code>someimage.jpg</code>. It's like an animation of the <code>outer</code> div as it slowly realizes it needs to take up the whole screen.</li>
  <li>On all subsequent refreshes, the expanding animation doesn't happen. Everything looks fine.</li>
  </ol>
  
  <p>What's going on in the first two loads of the webpage?</p>
  
  <p>The other weird thing is that if I don't have that blue border, #2 and #3 don't happen. That is, I'm stuck with just a blue line which is really the blue border of a collapsed <code>div</code>. I don't understand why I need the border to make the contents of the <code>inner</code> div to show up.</p>
  
  <p>Note that I'm using the same WebView for all the loads. That is, it's just calling <code>WebView#loadUrl</code>.</p>