1
Chrome/Edge/Firefoxではうまくいきましたが、Safariで失敗しているアプリの印刷メディアクエリを使用しています。私は印刷ページを埋めるために高さ100％を使用しています。サファリでは、パーセンテージを要素自体のパーセンテージとして使用しているようです。私は以下の簡単なコードを書いています。safariのmedia-queriesが高さ100％正しく表示されない
<!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>