Skip to content

.card-columns causes svg elements inside to not be visible upon resize in Chrome #28439

@httpete

Description

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions