javascript - Android tablet (Samsung galaxy tab) - table messes up on orientation change -

i have simple table in fiddle

http://jsfiddle.net/fzswp/3/

css

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; } 

when view on samsung galaxy tab, on initial load, seems fine once start changing orientation, things gets weird. when changing landscape, display messed up, looks text overlapping. looks showing previous orientation text , current orientation text. in screen changed orientation/resized display on screen did not update.

my tablet android 4.0.4, using stock browser.

i not sure looks in other android tablets because don't have 1 handy.

is there way correct behavior? or can other people confirm not happening on different device? open js/jquery solutions if any

i answering here if else run same thing can have easier time

the issue webkit browser(like android stock browser) not render table. coworker explains: there redraw flag or that, , when switch orientation flag not reset not redraw perfectly. solve this, hie element , check it's height show. using jquery simple process

$('.element').hide().height(); $('.element').show(); 

http://jsfiddle.net/fzswp/5/

chaining work well, putting in 2 lines easier follow. have seen on desktop chrome when displaying tooltip , same thing fix issue.