When generating a PDF with puppeteer "break-inside: avoid" is ignored

Question

I am generating a multi-page PDF from a webpage using puppeteer v 5.2.1.

I am using the following to ensure that this block element is not cut off at the page break:

.wrapper {
    display: block;
    float: left;
    break-inside: avoid;
}

I have set up other paged media stuff using @page to see that Puppeteer can deal with paged media.

But my block elements still get cut off?

Pupetteer is emulating the screen. Though when it uses the default print emulation, I get the same results.

Is there something I am missing in my setup?

I have this issue when using flex. Any idea how to work around it? It works well with the browser's print-to-pdf, but it fails with puppeteer-pdf — cuadraman, Dec 21 '20 at 16:04

score 9 · Accepted Answer · answered Sep 07 '20 at 09:02

Ok, I have solved this issue.

The problem was that the container element for my .wrapper elements was an inline-block.

The wrappers themselves are block elements so they adhere to the break-inside CSS. However, if the surrounding container, which contains multiples of these .wrapper elements is an inline-block, then it is treated as a monolithic block by the pages media CSS, so the user agent will then choose to split this block at the end of the page - without respecting it's block children.

This is by design according to the specification: https://www.w3.org/TR/css-break-3/#end-block

.parent {
  display: block;
}

.wrapper {
  display: block;
  float: left;
  break-inside: avoid;
}

<div class="parent">
  <div class="wrapper">
    <div>Some content</div>
  </div>
  <div class="wrapper">
    <div>Some content</div>
  </div>
  <div class="wrapper">
    <div>Some content</div>
  </div>
</div>

In my original problem, my parent was wrongly declared as

.parent {
  display: inline-block;
}

Also does not work with flex. Only block – Sajith Sageer Jun 16 '22 at 10:14 — Sajith Sageer, Jun 16 '22 at 10:14

Jonathan Martins · Answer 2 · 2020-09-01T04:11:21.827

1

I think your question was already answered in this topic: https://stackoverflow.com/a/27754912/3681102

"This is a known problem. page-break properties apply only to block-level elements."

I have a similar issue with tbody groups inside tables not respecting page-break-inside: avoid;

edited Sep 01 '20 at 04:11

answered Sep 01 '20 at 04:05

Jonathan Martins

734
7
24

Hi Jonathan - thanks for this, but in my case the .wrapper is a block element. It's the default - but I'll make it more explicit in the CSS. – Joerg Sep 01 '20 at 05:53

score 0 · Answer 3 · answered Mar 02 '22 at 13:26

0

For some reason, the CSS used on the parent didn't work for me.

But this worked:

.wrapper: {
    float: left; width: 100%;
}

I am using Chromium 79, puppeteer 2.0.0 and chrome-aws-lambda 2.0.0 (I needed old versions).

answered Mar 02 '22 at 13:26

Lucio Mollinedo

2,295
1
33
28

When generating a PDF with puppeteer "break-inside: avoid" is ignored

3 Answers3