Rotativa generated PDF does not display correctly - page break / element break

I've turned the web upside down for the last hour or so, but can't seem to find a solution for my rendering issue.

I am using Rotativa (1.6.4) as a PDF creation library that is capable of reproducing the HTML that I have thrown onto it with almost 100% accuracy. Why almost; because it seems that the charts that I convert to PDF are causing problems when the chart does not fit this page and should be carried over to the next page. See screenshot for details.

As you can see from the screenshot, one diagram is overlapping, which is happening for my unknown reason.

I tried adding the suggested page breaks, but without any help:

.page-breaker {
  display: block;
  clear: both;
  page-break-after: always;
 }

      

        
        
        
      

    

The wrappers around the charts have the following CSS rules:

.chartContainer {
  float: left;
  clear: both;
  width: 100%;
  height: 350px;
  margin: 20px auto;
  page-break-before: always;
  page-break-after: always;
}

      

        
        
        
      

    

Not only does the PDF generated by Rotativa display incorrectly, the same happens for the preview in Chrome. So the problem is obviously somewhere between page breaks and CSS, but a solution still exists.

Any help would be appreciated.