CODEWITHSUNDEEP
cssprintingsafaripage-break-inside
patman
patman

Reputation: 2840

Safari page-break-inside:avoid not working

I have a problem with CSS page-break-inside: avoid. I have some printing blocks which have this css attribute set, however Safari breaks any content just as the real page break occurs, while it works in all other major browsers (current versions) I've tested so far.

It doesn't seem to matter which type of content the printing block holds as I've seen this behavior with both a table and a canvas element being split up right in the middle.

As far as http://css-tricks.com/almanac/properties/p/page-break/ and https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html is concerned it should work. Couldn't find any additional and recent information on this matter with a quick search.

I'm on Windows 7 & Safari 5.1.7.

Upvotes: 13

Views: 9872

Answers (2)

Wallace
Wallace

Reputation: 279

page-break-inside: avoid (or variations thereof) seems to fail on Safari occasionally b/c its use depends very much on the display of the containing element and its height.

Mine was broken b/c I had defined the original page layout of the containing element to have height: 100%, which looks benign on the browser but I would notice that my elements were broken across pages in the print preview.

My fix was just to explicitly set the height of my container back to the browser default:

@media print {
    // Explicitly set height: auto
    .page-container {
        display: block;
        height: auto;
    }
    section {
        break-inside: avoid;
    }
}

This on Safari v14.1.2

Upvotes: 0

DoctorDestructo
DoctorDestructo

Reputation: 4362

Try using display: inline-block; instead of page-break-inside: avoid;. You may also want to add vertical-align: top; and width: 100%; to make the elements behave like normal block elements instead of inline elements.

This technique has been working reliably since long before page-break-inside: avoid; was implemented in most browsers. It's still the most reliable cross-platform way to prevent page breaks in a block of content.

If you want to make a table unbreakable, you can set display: inline-table; on it. Or you can just put it in an inline-block div.

Upvotes: 16

Related Questions