Report HTML + CSS + Print - Chrome bug

I am trying to render a report in HTML + CSS. My template contains header, content and footer. I want to repeat headers and footers on all pages as reports are based.

My CSS looks like this:

Title:

@media print {
 div.report-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    padding-bottom: 15px;
    border-bottom: 2px solid #000034;
  }
}

      

        
        
        
      

    

Footer:

@media print {
  div.report-header {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    padding-bottom: 15px;
    border-bottom: 2px solid #000034;
  }
 }

      

        
        
        
      

    

A possible error is that in Firefox the report works fine, repeating the header and footer on all pages, but in Chrome, the header is only present on the first page, and the footer is only on the last page.

I've tried many tutorials including using tables:

@media print {
  thead { display: table-header-group; width: 100%; background: red;}
  tfoot { display: table-footer-group; width: 100%; background: green;}
}

      

        
        
        
      

    

But the result is the same, Firefox works fine while Chrome is not working. Please, what can I do to make this simple report? Is there any plugin out there to do something like this?

I am using Chrome version 24.0.1312.70.