Safari: Есть ли обходной путь для ошибки позиционирования печати Safari CSS? - PullRequest
Новая
       87

Safari: Есть ли обходной путь для ошибки позиционирования печати Safari CSS?

0 голосов
/ 28 апреля 2020

Для последних версий Safari для macOS (13.0.3), а также для iOS (iOS 13.4.1) есть ошибка, которая влияет на CSS позиционирование объекта внизу страницы - но только для печати .

. Например, следующий код HTML должен явно рисовать зеленую область внизу страницы: 

<!DOCTYPE html>
<html>
    <body>
        <div style="position:absolute; left:0px; right:0px; bottom:0px; height:100px; background-color: green;"></div>
    </body>
</html>

Отображение этого кода в виде веб-страницы в Safari работает должным образом. Однако, с Safari до печати эта страница приводит к тому, что зеленая область находится в вверху предварительного просмотра печати PDF (или фактической печати) вместо нижнего (только часть его высоты видна вообще).

Другие браузеры печатают как положено.

Расположение области вверху страницы с помощью top:0px не создает таких проблем в Safari , либо; проблема заключается только в расположении внизу.

Есть ли какой-нибудь известный обходной путь?

1 Ответ

0 голосов
/ 28 апреля 2020

Попробуйте этот код 

@media print {
          * {
              page-break-after: always;
          }
      }
<div style="height: 100vh">
   <div style="position:absolute; left:0px; width: 100%; display: block; bottom:0px; page-break-after: always; height:100px; background-color: green;"></div>
</div>
...