Design Technology Troubleshooting

Obnoxious Bugs in CSS3 Columns

CSS Columns in Practice

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.


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 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.

Chrome can't figure out height...

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.

Transitions, but only on one side...

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.

Firefox and no column-span

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!

Safari's column-span duplication

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.

Design Troubleshooting

Flawed… On So Many Levels

In writing this post, I would like to draw your attention to the included picture, more specifically the paragraph to the left of the gloved hand holding the cigarette. Notice anything? Like an uglier-than-heck typo?

How is it that an ad, more than likely professionally produced and printed (as I saw it on a nice, big sticker), could have such a grave error? I just don’t understand it.

I’ll be the first to admit that I have never been the biggest fan of English classes. But I do, however, know that they have been very helpful in my learning to avoid such flagrant errors in my writing. And, assuming that the ad at the left was produced by someone with at least a high school diploma, that person spent at least 12 years of classes learning English.

How, then, did that slip by? I also assume that the person responsible for printing the ad also had at least a high school education. Then how did he or she miss it?

My point is that I could understand (though be disappointed) with an error that a student perhaps made in writing a paper. But when making an ad that is supposed to have a large audience, how could you do that? I’m sorry… But I’m just very disappointed. Saddened, even. I think that I’ll go cry now, for the sake of the people that made that ad.


A Curious Occurence

You know, I think that I have to say that troubleshooting problems is my favorite activity of all time. No, no, it’s really not. Considering the fact that I’ve spent over three hours attempting to fix a small but incredibly annoying glitch with the audio on my computer, and barely begun to make the slightest amount of headway, I have to look back and think… “Now, is that what I wanted to be doing with my time?”

And the answer to that is a resounding, “No. Not at all.” But, at the same time, in an attempt to keep this from becoming no more than a long complaint, I’ve got to say that the feeling that one gets after fully resolving a problem, especially one that has caused much pain and hair-pulling, is undeniably pleasant.

I write this because of the fact that somehow, though I knew not that it was possible, the WiFi connection on my computer is interfering with my audio, making it stutter in an incredibly annoying fashion. After completing ALL of Dell’s troubleshooting steps, I had made it nowhere. Or so it seemed. I had reverted my computer to its original settings and it had been successful for, at the least, a few minutes. But then the problems suddenly started again.

Anyway, after a long time of being rather frustrated, I returned to the settings that I had (thankfully not having to reinstall all my programs and whatnot), and decided to try disabling the WiFi. With the simple flick of a switch (literally), all the distortion disappeared. And I was again listening to beautifully clear music.

But, this leaves me with a dilemma. Internet, or music? As of right now, I can’t really have both at the same time. Hopefully I’ll be able to resolve the issue shortly. I’ve sent another email to Dell asking them about their insight on my latest discovery. Hopefully they’ll know something.

Anyway, thanks for listening. It’s been good fun for me.