Safari media-queries print not using height 100% c

2019-08-08 03:28发布

问题:

I'm using printing media queries for an app that is working fine on Chrome/Edge/Firefox but is failing on Safari. I'm using height 100% in order to make it fill the printing page, on safari it seems to be using the percentages as a percentage of the element itself. I have put simplified code below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>print test</title>
</head>
<style>
    .big{
        border:5px solid black;
    }
    @media print {
        .breaker{
            page-break-before: always;
        }
        .big{
            display:block;
            position:  relative;
            height:100%;
        }
    }
</style>
<body>
    <svg class = "big" width="700px" height="1000px"></svg>
    <div class = "breaker"></div>
    <svg class = "big" width="700px" height="1000px"></svg>
    <div class = "breaker"></div>
    <svg class = "big" width="700px" height="1000px"></svg>
</body>
</html>

According to Can I Use Safari doesn't support @page and page-after-break

This is a similar question on StackOverflow - Safari Print Media Queries not matching other browsers / cutting off

Try setting a specific size for the body and HTML.