Safari Print Media Запросы, не соответствующие другим браузерам/отключение

У меня есть веб-приложение, которое отлично выглядит при отображении в Safari, но запросы на печать не соблюдаются браузером. В Chrome вся область для печати выглядит отлично, однако в Safari она представляет собой лишь некоторую вариацию видимого контента.

При прокрутке страницы заголовок или верхняя область обрезаются, при печати выше на странице снизу снижается.

Я попробовал следующее для запросов на печать (без эффекта) -

В отличие от Chrome, я не могу найти способ отладки, почему это происходит, и способ отладки самих стилей печати.

Примечание. Я использую Bootstrap для стилей, поэтому есть контейнеры, строки, промежутки и т.д.... но даже полностью их удалять, и все, что находится на его собственной линии, не имеет значения, отображается одна и та же "высота" содержимого на принтере.

Ответы

Ответ 1

У меня нет ответов на этот вопрос после того, как он указал на проблему в комментариях выше и упомянул, что это была бесплатная награда. К сожалению, я бы очень хотел отдать щедрость, чтобы любой, кто пересказывает это до истечения срока, может иметь его -

Проблема заключалась в том, что приложение, которое я использую, представляет собой приложение JavaScript, которое запускает и создает тело страницы, высота которой составляет всего 400 пикселей. После визуализации тела есть отдельный модальный диалог загрузки, который показывался с контентом для печати, и все CSS были хорошими, а медиа-запросы были хорошими, но контент модалов был больше, чем тело.

После проверки кажется, что Safari (и, вероятно, другие браузеры) не учитывали высоту диалогов при расчете высоты тела.

Chrome и Firefox были в порядке с этим, потому что он печатал весь видимый контент, но в Safari он печатает только контент, который высок как тело, что в данном случае составляет около 30% от модального. Путем ручного запуска тела min-height: 1200px; он разрешил проблему, так как это была максимально возможная высота содержимого диалогового окна Bootstrap Modal.

Ответ 2

В прошлом у меня было много проблем с кросс-браузерами. Что помогает при регулировании визуального изображения, задается фиксированный размер страницы и html/body.

Например:

@media print {
    @page {
        size: 1600px;
    }

    body,
    html {
        width: 1600px;
    }
}