IE11: Printing infinite pages

Question

Basically, in IE11, when you try to print preview (or print, for that matter) this page (and a few others on this site), the page never renders in the preview pane and the number of pages climbs up infinitely: http://www.greatjakes.com/recent-work/

This bug can also be found on pages like these:

http://www.greatjakes.com/news/

http://www.greatjakes.com/news/kegler-brown-website-honored-as-one-of-the-top-sites-of-2014/

http://www.greatjakes.com/blog/the-disappearing-homepage-traffic-is-down-17-on-homepages-of-law-firm-websites/

• I've only been able to experience it in IE11. IE8 is fine.
• It is not JS-related. If you remove the JS from the page, it still occurs.
• If you remove the CSS entirely, it goes away, but that is missing the point.
• If you remove (using in-browser developer tools) the HTML elements within the #content-inner > .page block one by one, you'll find that the page actually prints properly when you reduce the number of elements down to about 5 (3 in some pages).

Other than that, I have no idea what is going on! Any help would be appreciated.

Answer 1

We managed to narrow the issue down to a single CSS rule:

#footer {
  display: inline-block;
}

We solved the problem by changing "inline-block" to just "inline" within the print-only CSS - but that won't help others fix their own problem because the bug probably manifests itself based on a number of random circumstances. It seems the key was to narrow down the cause. To do this, I simply deleted chunks of CSS until the page actually rendered in print preview. Once I deleted the chunk that was causing the problem, I restored everything and then worked within the critical chunk and deleted the CSS rule-by-rule until it worked. Once I figured out the exact line that was causing the bug, we changed the rule within the print-only CSS (no need to change how it looked in the standard CSS).