I got pretty excited when I found a promising application for CSS columns in a project I’ve been working on for my wife – she sells Dog Collars and Toys on Etsy, and we’ve been collaborating on creating a site to complement her Etsy shop. I figured that CSS columns would be the perfect way to responsively show the different styles she offers and materials she uses in her collars. Unfortunately, as I played around with actual layouts, I found that the implementation of columns in the various browsers is pretty flawed.
Issues
Thus far, I’ve tested out the same column layout in Chrome 40, Firefox 35, and Safari 8. Each one has its own bugs and quirks. I’m sure Internet Explorer has its own issues, too. In any case, though CanIUse.com shows over 90 percent support for the feature, none of that support is without issues. Sad day.
Chrome’s Bugs
Chrome has a couple apparent bugs in its columns implementation.
First, Chrome fails miserably at correctly calculating the height of elements in columns. Therefore, after ending a column, or after attempting to use column-span: all, an unsightly empty space appears between the end of the columns and the beginning of the next content. Ugh.
Secondly, Chrome can’t seem to render transitions in anything but the first column. Why this is, I’ll never understand. But hey, it’s there, and there’s currently nothing you can do about it.
Firefox’s Bugs
Firefox, on the plus side, only has one real issue. Unfortunately, it’s a pretty big issue if you want to have elements that span multiple columns using column-span. Otherwise, you’ll probably never even notice it. Unfortunately, column-span is something that I wanted to use.
Safari’s Bugs
Safari, inexplicably, can’t figure out column-span either, but in an entirely different way. Rather than not spanning them at all, it decides to duplicate certain elements both above and below the element that uses column-span. Fun stuff!
That’s That
Unfortunately, now I’ve got to seek out some other method of laying out my columns. Maybe I’ll have to revert to using good ‘ole float with all its quirks, and just add in the responsive magic myself. At least its quirks are well-documented. In any case, I’ll figure something out, and perhaps post it here when I figure it all out.
Leave a Reply