Howdy all!
So I was playing with some layout ideas and I stumbled upon a potential bug. I did some google searches and didn’t find anything about it, but I figured I would ask around for a solution/workaround before I report it.
First, Demo or it didn’t happen: http://codepen.io/Pmac627/pen/Kxmrl?editors=110 (new codepen URLs FTW!)
It involves using the CSS3 columns (columns, column-count, column-gap, etc) and outline properties together. It seems that in both Firefox and Chrome, the outline isn’t entirely restricted to that specific column.
Chrome actually doesn’t seem to put the outline on the column you want at all (except the right gap, if there is one). The left outline never shows, the bottom will appear on the next column (if there is one), and the top appears on the column before (again, if there is one).
Firefox, while closer to the expected result, creates a small outline box as big as the outline used on a 0px element (2px outline creates a 4px square) in the lower left corner of the column before it (yet again, if there is one).
Are there any alternatives or workarounds for this issue? I changed my approach to use borders, but I was hoping to use the outline since its less of a hassle to use. I like the fact that outlines help highlight the element by overlaying it’s surroundings and wanted to keep that effect when possible.
