Table-cell breaks on window resize in Safari - css

Question

I have a table built out of div elements. By default elements display as table-cell.
On #media screen and (max-width: 769px) elements need to become table-row.
Every browser works fine except Safari.
In safari it shows fine until I re-size window to very narrow and then back full width. at that point table breaks. if I refresh page or disable and re-enable table-cell style table fixes itself.
Example:
http://jsfiddle.net/sergejpopov/TvEWf/
Is that a Safari bug? How to fix?

Answer 1

It sounds like you're not adhering to a correct structure- you shouldn't swap out table-cell for table-row, they serve two distinctly different purposes which are not equivalent in terms of interpreted layout, the table structure should always follow:
table (display-table)
row (display-row) <- important to denote a row of elements
cell (display-cell) <- important to denote (column based) content within a row
/cell
/row
/table
You're missing out either the row or cell level with your approach, so although everythign seems to be interpreted correctly for the most part, your css is actually in error.
I would suggest you consider using floated or inline divs, see
FIDDLE
HTML
<div class="t">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
CSS
*{
box-sizing:border-box;
}
.t
{
width:100%;
}
.t>div
{
border:1px solid red;
display:inline-block;
width:25%;
margin:0;
padding:0;
zoom:1;
}
#media screen and (max-width: 769px) {
.t
{
width:100%;
display:table;
}
.t>div
{
border:1px solid red;
display: block;
width:100%;
zoom:1;
}
}