Css columns height incorrect in Safari only

Question

This code is working fine in Chrome/Firefox, but in Safari the content below my 3-column div is being pushed down much further than it should, as if the column content was condensed within a single column.

This can be seen here: http://codepen.io/anon/pen/egxvqP

Relevant code:

.postIntro {
  width: 100%;
  display: inline-block;
  margin-top: 18px;
  column-count: 3;
  column-gap: 30px;
  column-fill: balance;
}

Philoctetes

Answer 1

My current fix is using js to get the div height and then changing the margin top to a negative value of the div height, but I'd love if there was some not-js fix...I need this to work on a page where this happens in 10 places, the code only really works if it's once.

See here http://codepen.io/anon/pen/OWdmXj

if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1)  { 
    columnHeight = $('#columns').outerHeight();
    $("#contentAfter").css('margin-top', -columnHeight);
}

Changing the display away from inline-block fixes it.

Philoctetes

This looks like a bizarre rendering engine bug. Thanks, your solution worked for me in a number of cases. – Leavetaking