CSS columns break ion-card

Ionic Framework ionic-v3
1

I’ve just found that the ion-card component may not remain whole when using a simple multi-column layout.

In some cases, the background image is torn out of the card. In worse cases, the bottom shadow of the last card of column i will show up orphaned at the very top of column i+1.

To easily see the issue in Chrome, right-click > Inspect. Click the “toggle device toolbar” icon, and drag the screen to resize. Based on your width & height, you’ll experience different ion-card issues.

Any help is appreciated!!

Thanks,
Ryan

TS

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
    selector: 'page-page1',
    templateUrl: 'page1.html'
})

export class Page1 {

    public _robots: any[];

    constructor(public navCtrl: NavController) {
        this._robots = [
            { name: 'Bender', imgPath: 'https://upload.wikimedia.org/wikipedia/en/a/a6/Bender_Rodriguez.png' },
            { name: 'Calculon', imgPath: 'http://vignette3.wikia.nocookie.net/en.futurama/images/b/b3/Calculon-2.JPG/revision/latest?cb=20090604015557' },
            { name: 'Clamps', imgPath: 'http://i.imgur.com/rdIwEF9.gif' },
            { name: 'Crushinator', imgPath: 'http://www.netbrawl.com/uploads/1d851a1aa94ef0b997da28d6ad970885.jpg' },
            { name: 'Donbot', imgPath: 'http://vignette2.wikia.nocookie.net/en.futurama/images/1/13/Donbot.jpg/revision/latest?cb=20080112205318' },
            { name: 'Flexo', imgPath: 'http://vignette3.wikia.nocookie.net/en.futurama/images/8/83/Flexo.jpg/revision/latest?cb=20090605001726' },
            { name: 'Tinny Tim', imgPath: 'http://vignette2.wikia.nocookie.net/en.futurama/images/0/04/TinnyTim.png/revision/latest?cb=20130330073533' },
        ];
    }
}

SCSS
(derived from MHartington CSS Example)

page-page1 {

    h1 {text-align: center;}

    @media (max-width: 480px) {                                         // phone held vertically
        div { background-color: blue; }
        .botLayout { column-count: 1; }
    }

    @media screen and (min-width: 481px) and (max-width: 768px) {       // phone held horizontally or tablet held vertically
        div { background-color: red; }
        .botLayout { column-count: 2; }
    }

    @media screen and (min-width: 769px) and (max-width: 1024px) {      // tablet held horizontally
        div { background-color: green; }
        .botLayout { column-count: 2; }
    }

    @media screen and (min-width: 1025px) {                             // large tablet, laptop, & desktop
        div { background-color: yellow; }
        .botLayout { column-count: 3; }
    }
}

HTML

<ion-header>
    <ion-navbar>
        <button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title>Page One</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <h1>Resize The Page Width...</h1>

    <div class="botLayout">
        <ion-card *ngFor="let robot of _robots">
            <img [src]=robot.imgPath />
            <ion-card-content>
                <ion-card-title>
                    {{ robot.name }}
                </ion-card-title>
                <p>
                    Hello.
                </p>
            </ion-card-content>
        </ion-card>
    </div>

</ion-content>
2

So far, a partial solution has been to add the following to the SCSS file

ion-card {
        -webkit-column-break-inside: avoid;
           -moz-column-break-inside: avoid;
            -ms-column-break-inside: avoid;
                column-break-inside: avoid;
                  page-break-inside: avoid;
                       break-inside: avoid;
    }

However, this doesn’t fix the ion-card’s shadow from showing up in the next column.

Still working towards a solution.