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) {
      return;
    }

    window.lastImmediate = setImmediate(function() {
      var pony = $("<style>* { display: inline }</style>");
      $(document.head).append(pony);
      requestAnimationFrame(function() {
        pony.remove();
        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: https://github.com/NobleJS/setImmediate

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.