CSS Print duplicate content

Question

I've been trying to create a custom styling for a component and it requires printing, the problem is that whatever i want to print comes out duplicate.

I tried to recreate in codepen but I wasn't able to.

This is what I added to css print:

@media print and (color) {
  @page {
    margin: 5mm;
    size: A4 landscape;
  }

  * {
    overflow: visible !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #212121 !important;
    visibility: hidden;
  }
  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
  }
  body,
  .section-to-print {
    height: auto !important;
  }
  .section-to-print,
  .section-to-print * {
    visibility: visible !important;
  }
  .section-to-print {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    display: block !important;
  }
  .section-to-print:nth-child(2) {
    display: none !important;
  }
  .vis-timeline {
    display: none;
  }
  core-dialog,
  .dialog-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }
}

Answer 1

Turns out the problem was that the parent element had "position:fixed", that's the cause of the duplication in my problem.