媒体打印在野生动物园上显示白页

Question

我已经设置了一个print.scss文件来处理我的应用程序的打印，并且该文件在Firefox和Chrome浏览器中可以正常工作。但是在Safari上，我只会看到一个白页。

我缺少什么（我没有添加任何代码，因为正如我说的那样，它可以在Chrome和Firefox上运行，但是如果需要的话，我会在答案中发布它）？

编辑：这是我的print.scss文件：

@media print {
  *,
  *:before,
  *:after,
  *:first-letter,
  p:first-line,
  div:first-line,
  blockquote:first-line,
  li:first-line {
      background: transparent !important;
      color: #000 !important;
      box-shadow: none !important;
      text-shadow: none !important;
  }
  body > *:not(section.results) {
    display: none !important;
  }
  @page {
    margin: 0cm;
  }
  header,
  footer,
  section.sidenav,
  #background {
    display: none !important;
  }
  main, #root, {
    height: unset !important;
    width: unset !important;
  }
  article.arcanes {
    background: white !important;
    page-break-inside: avoid !important;
    margin: auto !important;
    position: relative;
    width: 20cm !important;
    height: 13cm !important;
    font-size: 9px !important;
    justify-content: center !important;
    align-content: center !important;
    align-items: center !important;
    ul {
      li {
        color: black !important;
        margin: .05cm 0 !important;
        padding: 0 !important;
        img {
          height: 1.5cm !important;
          width: auto !important;
        }
        p {
          color: black !important;
        }
        figcaption {
          margin: 0 !important;
          &.show-description {
            margin: 0 !important;
          }
        }
      }
    }
    ul.first {
      width: 10cm !important;

      .m4 {
        margin-right: 20% !important;
      }
      .m6 {
        margin: 0 0 10px 10% !important;
      }
      .m8 {
        margin: 0 10% 10px 0 !important;
      }
    }
    ul.second {
      width: 3cm !important;
      padding: 0 !important;
    }
  }
}

我到处都使用!important来确保应用规则