Search code examples
htmlcssgoogle-chromepage-break-before

"page-break-before: always" not working as intended after updating chrome from v97 to v98


https://cbbanalytics.com/stats/27694/games/1864019/overview - page-break-before is not working as intended on this page following chrome update from v97 to v98. In the screenshot below:

enter image description here

The highlighted <h3> element has the class print-break, which simply adds the CSS style page-break-before: always. However, when we pull up the print window (CMD+P on mac) and set Margins: None, the print break is not correct on chrome v98. On a colleague's laptop that still has Chrome v97 and the page-break-before works just fine.

enter image description here

We're not sure if this an issue with Chrome v98 or with our site's CSS and html. I created a simple html file with just a few <p> tags and a page-break-before and the page break worked fine for me locally in chrome. Quite frankly, it seems like chrome is miscalculating the page size for print, it is just so strange that the page break starts at the bottom of the previous page... Changing Margins: from None to either Default or Minimum does resolve the issue on this page, however there are many pages on our site where the page-break-before is buggy regardless of print margins.


Solution

  • (1) Meh Option - Changing Margins: from None to either Default or Minimum seems to resolve our issue... We prefer None for saving pages on our site to PDF without a white border around the page, however Default looks just fine otherwise and we can use this.

    (2) Better Option - Adding width: 100.25% to the div with class controller-navbar-container fixes this issue on this page and on every other page on the site as well. I am not sure why this is the case.