Firefox Bug: Flexbox Elements Won't Wrap to Next Page in Print

I was recently checking / correcting print styles on a client site, and I ran into this somewhat frustrating issue when printing from Firefox. Certain areas of the page would get cut off at the end of page 1 and never reappear on page 2. Obviously, this is not what users are looking for when they attempt to print a website.

I knuckled down to identifying the issue, and eventually hit on forcing display: block on all elements on the site. This caused Firefox to properly wrap the element(s) to the next printed page.

@media print {
    * {
      display: block !important;
    }
}

Obviously, this is not ideal either because it overrides many .hide-for-print and display:inline elements. I quickly found a Firefox bug which acknowledged the issue four years ago. Unfortunately, it has not been fixed yet.

The quick fix: Change display: flex to display: block. Too bad about your nice flexbox layout, but in print mode >readability is more important than design and layout.

Luckily, almost every instance of display: flex on this site was via Foundation's new XY Grid, so it's fairly easy to disable flex grids everywhere on the site by simply overriding the grid-x or grid-y classes.

@media print {
    .grid-x, .grid-y {
        display: block;
    }
}

For a more powerful use case, we may want to disable this print helper for certain elements. Use .grid-printable to disable this override.

@media print {
    .grid-x:not(.grid-printable),
    .grid-y:not(.grid-printable) {
        display: block;
    }
}

Finally, if we override the grids in print, and force grid cells to fall below each other, we should make them full width and align the text to the left just in case.

@media print {
    .grid-x:not(.grid-printable),
    .grid-y:not(.grid-printable) {
        display: block;
    }
    .grid-x:not(.grid-printable) > .cell,
    .grid-y:not(.grid-printable) > .cell {
        width: 100%;
        text-align: left;
    }
}

With luck, this may eventually make it into Foundation 6.

May 5, 2018

« TIL: How to use add_filter() in Wordpress - Installing a Wildcard SSL with Certbot »