Page-break in iframe on Chrome not working?

Question

I have a iframe inside my application and if I add page break on some div , it is ignored on Chrome (on Safari it works as expected).

I just have this print css that controls page-breaks:

page-break-before: always; page-break-inside: avoid;

Also if I open this iframe as a separate page, page breaks also work as expected.

Answer 1

the parent and the element onto which you want to control page-breaking must be declared as:

position: relative;

This is true for:

page-break-before
page-break-after
page-break-inside

but controlling page-break-inside it'll not work on Safari (tested on 5.1.7 version)

Answer 2

I was struggling with this same issue. In my scenario, I was using a hidden iframe to seamlessly load the print-friendly content and then trigger the print dialog. By specifying a width of 0px (or even 1px) on the iframe element, Chrome would effectively ignore my print CSS.

By specifying only a height of 0px and leaving the width unset, Chrome began honoring the print styles.