The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Problem table-cell, table-row with Safari & Chrome Reply To: Problem table-cell, table-row with Safari & Chrome

Brendan Molloy

I’ve had this bug a lot. Basically, if you change from display: table-cell to display: block on a media query, it can refuse to redraw and end with some unexpected results.

My elegant solution:

if (/WebKit/.test(navigator.userAgent) && !/(Mobile|Tablet)/.test(navigator.userAgent)) {
  window.lastImmediate = null;

  $(window).resize(function() {
    if (window.lastImmediate) {

    window.lastImmediate = setImmediate(function() {
      var pony = $("<style>* { display: inline }</style>");
      requestAnimationFrame(function() {
        window.lastImmediate = null;

Doing this forces the browser to redraw those elements with block types by forcing them to temporarily go from table-cell to inline before going to a block type.

Regex is to ensure this only applies to WebKit browsers that aren’t tablet or mobile, as those don’t display the issue.

Uses setImmediate polyfill from here:

You could easily just sub in a setTimeout in place if you don’t want the dep but the results might be a bit less seamless.