.card-columns causes svg elements inside to not be visible upon resize in Chrome
Created by: httpete
We are seeing a problem rendering highcharts (svg) within .cards, within .card-columns, and I have isolated the exact cause. This worked fine in 4.0.0, but breaks in higher versions.
Here is a pen showing it working fine in 4.0.0, before the responsive .card-columns was in play. Look at the Capacity chart. If you resize the html area (Drag the vertical to the right) when the cards reshuffle, the blue bar area is visible and works nicely. https://codepen.io/anon/pen/LaLzZb
Here is a pen showing it not working in 4.3.3
https://codepen.io/vinjosh/pen/OqWRMZ
The culprit is the column-count property, that is applying to the svg element here:
`@media (min-width: 576px)
.card-columns {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;`
If you take out the column-count, the columns shuffle, and the blue is visible. I think the bleed effect of the column count is affecting the svg element.
The delta between 4.0 and 4.3 is the addition of the responsive .card-columns breakpoints. I would tend to think that this is a fairly common thing, not specific to highcharts, they are just svg within cards.