медиа-печать отображает белую страницу на сафари - PullRequest
0 голосов
/ 02 октября 2018

Я настроил файл 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 везде, чтобы убедиться, что правила применяются

...