Issue
I'm using Chrome to generate a PDF : everything works well until some of the divs contain the following CSS transform used to scale down their content :
transform-origin: 0px 0px;
transform: scale(0.5);
An example of broken page is available here and the full code is available at the end of this post.
This example creates two Letter pages; each page contains two divs side by side that cover the full height of each Letter page. The content of the right div is scaled down using the CSS transform. All looks good in the browser. But when printing the page (either via Chrome headless or via the browser print feature), the height of the scaled down div is wrong on the first page (its content is properly scaled down).
<html lang="en">
<head>
<style>
@page {
margin: 0;
padding: 0;
size: Letter portrait;
}
body {
overflow: auto;
position: relative;
margin: 0;
padding: 0;
border: 0;
display: flex;
flex-direction: column;
}
.page {
overflow: hidden;
position: relative;
width: 8.5in;
height: 11in;
break-after: page;
}
.widget {
position: absolute;
left: 0px;
top: 0px;
width: calc(8.5in / 2);
height: 11in;
}
.widgetScaled {
opacity: 0.6;
position: absolute;
left: calc(8.5in / 2);
top: 0px;
width: calc(8.5in * 2);
height: calc(11in * 2);
transform-origin: 0px 0px;
transform: scale(0.5);
}
.title {
font-size: 96px;
}
</style>
</head>
<body>
<div class="page">
<div class="widget" style="background-color: beige;">
<span class="title">1</span>
</div>
<div class="widgetScaled" style="background-color: beige">
<span class="title">1scaled</span>
</div>
</div>
<div class="page">
<div class="widget" style="background-color: lightblue;">
<span class="title">2</span>
</div>
<div class="widgetScaled" style="background-color: lightblue;">
<span class="title">2scaled</span>
</div>
</div>
</body>
</html>
Edit : the issue happens only with all the pages but the last and it seems related to scaleY only (scaleX seems to be working fine).
Solution
Following the proposal mentioned in https://bugs.chromium.org/p/chromium/issues/detail?id=1501807, the following fixed the issue:
.page {
contain: size;
}
Answered By - Marc Polizzi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.