title: Android tablet (Samsung galaxy tab) - table messes up on orientation change
body: <p>I have a simple table in this fiddle</p>
  
  <p><a href="http://jsfiddle.net/FzSwP/3/" rel="nofollow">http://jsfiddle.net/FzSwP/3/</a></p>
  
  <p>CSS</p>
  
  <pre class="lang-css prettyprint-override"><code>table {
      width: 100%;
  }
  td {
      padding: 10px;
      border: 1px solid #ccc;
  }
  .name {
      background: url("http://www.lexus.ca/images/footer/logo.gif") no-repeat right center transparent;
      padding-right: 40px;
      width: 20%;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
  }
  </code></pre>
  
  <p>When I view it on the Samsung Galaxy tab, on initial load, everything seems fine but once I start changing orientation, things gets weird. When changing to landscape, the display is all messed up, it looks like the text are overlapping. It looks like it is showing the previous orientation text and the current orientation text. As in the screen changed orientation/resized but the display on the screen did not fully update.</p>
  
  <p>My tablet is android 4.0.4, using the stock browser.</p>
  
  <p>I am not sure what it looks like in other android tablets because I don't have one handy.</p>
  
  <p>Is there a way to correct this behavior? or can other people confirm that this is NOT happening on a different device? I am open to js/jquery solutions if any</p>