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

user_117305 0
Viewed 2511

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?

puppeteer
3 Answers

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;
}
user_1173050

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;

user_36811020

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

user_27302330
Related