Print width different on chrome and safari

Question

I'm implementing a report viewer on a modal view. these are some of print styles:

@page{
   margin: 5mm;
}

body{
   visibility: hidden;
}
.modal-report{
   width: 100%;
   height: 100%;
   margin: 0;
}
#report-view-container-id, #report-view-container-id *{
   visibility: visible;
}
#report-view-container-id{
   width: 100%;
   height: 100%;
   position: absolute;
   top:0;
   left: 0;
}

.report-view-container-letter
{
   max-width: 23.59cm;
   max-height: 27.94cm;
   min-width: 23.59cm;
   min-height: 27.94cm;
   padding-right: 15px; 
   padding-left: 15px;
}

On firefox when I try to print works great the width is perfect but on google chrome and safari the with is around 60%. There is already a question asked 6 years ago but that say nothing.

On firefox:

On google chrome and safari:

This is a little plnkr trying to recreate my case

Please provide the relevant HTML, and cut out any CSS that doesn't make a difference for the question (e.g. we don't need the `visibility: visible` because nothing was set to `visibility: hidden`). If you use a "snippet" (the `< >` icon if you click "edit" we'll be able to see the result demo! — henry, Sep 05 '16 at 19:18

score 3 · Answer 1 · answered Mar 10 '20 at 17:52

I ran into a similar issue when printing in Safari. The text was not wrapping and would run off of the right side of the page. To fix this I added the following to my style sheet. The most important element to nuke was Bootstrap's .container class.

@media print {
html, body, main, header, footer, .container {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    position: relative !important;
    text-indent: 0 !important;
    clear: both !important;
    width: auto !important;
    height: auto !important;
    border: none !important;
    overflow: visible;
    margin: 0 auto 0.5% auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    padding: 0 !important;
    text-align: left !important;
    max-width: none !important;
    min-width: auto !important;
    min-height: auto !important;
    max-height: auto !important;
    direction: ltr !important;
}}

BEFORE:

AFTER:

score 1 · Answer 2 · answered Sep 05 '16 at 19:16

1

This isn't an answer yet, but a comment won't let me include the formatting I need…

@page isn't a valid media query and will just be ignored. For print styles, this should be @media print. The margin isn't being applied to anything - you want something like

@media print {
    mytargetelement {
        margin: 5mm
    }
}

Does that help your problem at all?

answered Sep 05 '16 at 19:16

henry

4,244
2
26
37

That's the only suggestion I can make until you edit your question to add a complete (but minimal) example :) http://stackoverflow.com/help/mcve – henry Sep 05 '16 at 21:04

score 0 · Answer 3 · edited Sep 25 '22 at 12:37

0

try giving width and min-width and position to your css class

width: 30%;
position: relative;
min-width: 20vh;

edited Sep 25 '22 at 12:37

Ahmet Emre Kilinc

5,489
12
30
42

answered Sep 24 '22 at 09:28

uma mahesh

131
1
5

Print width different on chrome and safari

3 Answers3

Linked