Масштабированный элемент обрезается при печати в IE11

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

В IE я вижу, что мой контент обрезан на полпути вниз по странице.

Я создал упрощенный пример того, что, по моему мнению, является причиной моей проблемы, а именно то, что масштабированный контент, кажется, занимает только этот процент страницы. Например, если я масштабирую содержимое на 50% (0,5), оно занимает только половину пространства страницы, когда я его печатаю. При масштабировании на 75% он занимает около трех четвертей пространства страницы. Пример ниже.

Структура HTML

<body>
    <div class="content">
        ... content goes here ...
    </div>
</body>

CSS

    .content {
        transform: scale(0.5);
        transform-origin: left top;
    }

Вот размещенная версия, которую вы можете увидеть в действии, с границами для отладки: https://neisha.github.io/ieprintingissue/

Изображение поведения в IE

Я пробовал все виды различных перестановок CSS, чтобы заставить его работать, но я в растерянности. Также я не уверен, если это ошибка в IE или ожидаемое поведение. Я не могу себе представить, кто хотел бы такого поведения. Есть ли гроссмейстер, который может пролить свет на это?

Источник

1 ответ

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

Я могу заставить его правильно отображаться в предварительном просмотре печати / печати, но только если содержимое помещается на одной странице.

Для этого требуется, чтобы масштабированный элемент находился в абсолютно позиционированном элементе контейнера и вел себя по-разному в зависимости от того, относится ли контейнер к элементу в его происхождении (в потоке DOM), или же элементы контейнера полностью находятся вне поток DOM.

Я объясню каждое из этих ограничений на примере ниже:

Структура HTML

<body>
    <div class="relativeAncestor">
        <div class="container">
            <div class="content">
                ... content goes here ...
            </div>
        </div>
    </div>
</body>
  1. Невозможно разрешить контенту переходить на несколько страниц

Абсолютно позиционированный контейнер и его предки также не должны проходить по нескольким страницам. т.е. они не могут быть больше высоты просмотра.

Пример CSS для применения ограничений 1

.container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    overflow: hidden;
}
  1. Абсолютно позиционированный родитель находится вне потока DOM, поэтому у него нет предков.

Пример CSS для применения ограничений 1 и 2

// html, body and .relativeAncestor will have position: static by default

.container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    overflow: hidden;
}

.content {
    position: absolute;

    transform: scale(0.5);
    transform-origin: left top;
}
  1. Если он находится в потоке DOM (имеет относительного предка), он должен начинаться с вершины страницы без пробелов

Это означает:

  • без полей сверху
  • если граница, если имеется, нужно задать для размера рамки значение border-box
  • набивка в порядке

Пример CSS для применения ограничений 1 и 3

html, body {
    width: 100%;
    height: 100%;
}

body {
    margin-top: 0;
}

.relativeAncestor {
    position: relative;

    width: 100%;
    height: 100%;
}    

.container {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    overflow: hidden;
}

.content {
    position: absolute;

    transform: scale(0.5);
    transform-origin: left top;
}

В случаях 2 и 3 поля на абсолютно позиционированном контейнере в порядке.

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

Вот размещенная версия частичного обходного пути, который вы можете увидеть в действии: https://neisha.github.io/ieprintingissue/workaround.html

Изображение ожидаемого поведения

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

Источник
Другие вопросы по тегам