Search code examples
cssgoogle-chromesafaricss-multicolumn-layout

Why does Safari render CSS multi-column layout differently?


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: chrome rendering

Safari renders: safari rendering

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.


Solution

  • 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