Problem table-cell, table-row with Safari & Chrome

[Kushal Jayswal]

@Rohithzr

display: block !important;

for smaller screens works for me.

Thanks.

[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.

[WebDevJoshB]

I never had this issue until the last Chrome update (45.0.2454.85). I’ve always used this technique for responsive email coding (otherwise I wouldn’t use tables, obviously) for viewports less than 480px when there is a lot of horizontal content that needs to be changed to a vertical layout.

Initially it works, but if you resize your browser at the 480 breakpoint, the stacked TDs render in a hybrid table-cell/display:block layout. Or, if you’re viewing on a smartphone, switching from portrait to landscape back to portrait will give the same wonky layout problem.

As it’s an email, JavaScript is not an option.

There is a Chrome bug submitted for it, but it’s been posted for awhile so I don’t think they will be “fixing” anytime soon.

CodePen: http://codepen.io/WebDevJoshB/pen/JYGBvB

I’m looking at the “flexbox layout”, floats, positions, but so far nothing is working. Maybe someone else has had better luck?

*****EDIT*****

I found the solution: In the containing <tr> set it to display:table-cell.

table.classname tr { display:table-cell !important; }
table.classname td { display:block; width:100% !important; }

[Author]

Posts