0

i'm having a hard time getting printing to work properly in Safari 9.1 on OSX El Capitan.

I haveMedia-Queries in place which are supposed to render the page differently on landscape or portrait mode. While resizing Safari itself, everything works as expected, but altering the papers orientation within the print-dialog does not respect the mediaqueries.

It's working as expected in the latest Chrome, Firefox and IE. But not in Safari. The code i'm using is:

<!DOCTYPE html>
<html>
 <head>
 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
 <style type="text/css" media="print, screen">
    .print-body, body, html {
        width: 100%;
        height: 100%;
        margin:0;
        padding:0;
    }
    @media (orientation: portrait) {
        .print-body {
            background-color: red;
        }
        .print-body:after {
            content: 'portrait';
            font-size: 30px;
            position:absolute;
            top:0;
            left:0;
        }
    }

    @media (orientation: landscape) {
        .print-body {
            background-color: blue;
        }
        .print-body:after {
            content: 'landscape';
            font-size: 30px;
            position:absolute;
            top:0;
            left:0;
        }
    }
  </style>
  <title>TEST</title>
 </head>
 <body onload="window.print()">
    <div class="print-body"></div>
 </body>
</html>

it can be tested here: https://output.jsbin.com/qukidul (from this gist)

Any help or insights would be appreciated! Thanks in advance.

ADDITIONAL OBSERVATIONS:

  • if you switch to papersize "letter", chrome won't take the mediaqueries into consideration neither - why?
Robert Krgr
  • 1
  • 1

0 Answers0