Why does Safari render CSS multi-column layout differently?

Question

I'm building a website and testing it on Chrome mostly, intermittently checking if it still works on Firefox.

I figured that, since both Chrome and Safari run on WebKit, they would render the website identically. This is not the case though.

I was checking the site on Safari and I noticed that my menu bar, which uses an unordered list with column-count (both -moz- and -webkit- with the same value), and noticed that there is a difference between the filling of the columns.

Chrome seems to fill the columns evenly while Safari just fills the columns one by one. The images below illustrate this.

Chrome renders:

Safari renders:

I very much like the Chrome way of rendering the columns, so I was wondering if there is a way to force Safari to render the site this way, possibly without altering the html layout at all.

notes: Firefox renders the same as Chrome and needs no fixing. I'm not developing for IE, so I don't know how that renders.

Milt

Answer 1

add a min-height to <ul> seems to fix the issue

nav ul { ... min-height:50px; } /* < add */ 

tested on Safari 5.1.7 (7534.57.2) for PC

bug is referenced here too: http://css-tricks.com/forums/discussion/12904/safari-5-1-multi-column-bug-extra-columns-appear-/p1

Fuchsia

although this helps the filling of the columns, it also makes Chrome add another column rule to the last column (wich is unwanted). On safari this works perfectly though +1. – Milt

Answer 2

I had the same issue but min-height didn't work. I had the column-count set on a Bootstrap .col-md-12 container and this was the issue for me.

I added a child div with the class required and it worked perfectly

Masonmasonic

I was in the exact same situation except in my case the symptom was that the column elements didn't appear at all - each had a height of 1px. Insert a div into the col-md-* container and applying column-count to that div solved my issues. – Lactate

Love you for this <3 – Busch

This! Worked perfectly when i was using Foundation – Peridot

Answer 3

I had a similar problem with the columns content showing up on Safari with a height of 1px. I added "min-height: 100%" to the element and all looks good. I also have "height: 100%" on the body/html and containing elements, assuming this is how I got it to work properly.

Not