paged.js Paged content: Footer appears only on the last page, Top title works

Question

Good day,

I use paged.js I added a top title on every page, but that approach does not work for a footer. I thought about missing semicolon.

https://jsfiddle.net/aldari/sy3pb7a2/6/

@page {
  @top-center {
    content: element(repeatable);
  }
  
  @bottom-center {
    content: element(footerblock);
  }
  
  border: 1px solid black;
}

.repeatable {
  display: block;
  position: running(repeatable);
}

.footerblock {
  display: block;
  position: running(footerblock);
}

.page1,
.page2,
.page3 {
  break-before: page;
}

<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>

<div class="wrapper">

  <div class="repeatable">
    <div class="">header</div>
  </div>

  <div class="page1">page 1 content</div>
  <div class="page2">page 2 content</div>
  <div class="page2">page 3 content</div>

  <div class="footerblock">
    <div class="">footer</div>
  </div>
</div>

Answer 1

I meet the identical report: Running footer "element(footer)" in paged media appear only in last page

The answer: put footer content before main content like in a header. The repeating block is extracted from the main flow, but it is not defined for pages until the last one, so it should appear in the begging, before main content.

<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>

<div class="wrapper">

  <div class="repeatable">
    <div class="">header</div>
  </div>

  <div class="footerblock">
    <div class="">footer</div>
  </div>

  <div class="page1">page 1 content</div>
  <div class="page2">page 2 content</div>
  <div class="page2">page 3 content</div>
</div>