Question 287672 in Html Question posted in
Some basic documentation can be found here.

Html – CSS transform:scale() and print to PDF broken

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).

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Following the proposal mentioned in https://bugs.chromium.org/p/chromium/issues/detail?id=1501807, the following fixed the issue:

    .page {
   contain: size;
}

  2. 0

    Changing position absolute to relative from "widgetScaled" class will fix the issue.

    <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: relative;
        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>
    <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>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search