I just spent 2 working days wrangling around a nasty IE9-IE10 bug that would break an editorial page I was working on, in print. If you do happen to do stuff for print read on.

The problem

The problem would present itself in Internet Explorer 9 and 10. The first one would still let me Print Preview the page, though would throw in loads of white-space in between elements. The latter, would go into an infinite Print Preview loop that would look somewhat like this:

The counter at the very bottom would just keep on going until IE would crash or dig a whole in your screen. If you haven’t gone postal yet then you’ll be relieved to learn what’s to come.

Diagnosis

After multiple trials I realised I was dealing with a figure that would occupy 1.5+ sheet of A4-size paper to sit in comfortably. I had figures of differing sizes throughout the entire site and sometimes I didn’t want them to be split between pages. And so I resolved to page-break-inside: avoid, not realising what hell I threw myself into.

If an element larger than the size of a page gets page-break-inside: avoid IE9-10 simply won’t understand how to lay out things. It will see that a canvas of a sheet of a page is not enough, so it’ll try to see if the next page offers more space. If not, then it’ll try the next one, and again, and again.

Solution

Just make sure to apply the default page-break-inside: auto to items that might not fit on one sheet of paper and you’re good to go. Hopefully this has saved somebody some time. Ta-dan.