Why does Safari render CSS multi-column layout differently?

css google-chrome safari css-multicolumn-layout
romeovs picture romeovs · Jan 3, 2013 · Viewed 10.8k times · Source

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.

Answer

Friendly Code picture Friendly Code · Jun 20, 2016

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

Related questions

How can I force WebKit to redraw/repaint to propagate style changes?

I have some trivial JavaScript to effect a style change: sel = document.getElementById('my_id'); sel.className = sel.className.replace(/item-[1-9]-selected/,'item-1-selected'); return false; This works fine with the latest versions of FF, Opera and IE, but …

Read More
Chrome & Safari Error::Not allowed to load local resource: file:///D:/CSS/Style.css

When I access my aspx page in chrome or safari it shows this error in console Not allowed to load local resource: file:///D:/CSS/Style.css Everything works fine in IE and FF. I use an external CSS which …

Read More
Safari font rendering issues

As you can see below, the Texta-Light font in Chrome appears completely different with Safari. Chrome displays the font as I like but Safari's rendering on OS X and iOS looks too thin. The Safari image below is taken on …

Read More