CSS transform：scale（）和打印到 PDF 损坏-解网

问：

我正在使用 Chrome 生成 PDF ：一切正常，直到其中一些包含以下用于缩小其内容的 CSS 转换：divs

transform-origin: 0px 0px;
transform: scale(0.5);

此处提供了损坏页面的示例，完整代码可在本文末尾找到。

本示例创建两个页面;每页包含两个并排的页面，覆盖了每个页面的整个高度。使用 CSS 转换按比例缩小右侧的内容。在浏览器中一切看起来都不错。但是，在打印页面时（通过 Chrome 无头或通过浏览器打印功能），第一页上按比例缩小的高度是错误的（其内容已正确缩小）。LetterdivsLetterdivdiv

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

编辑：该问题仅发生在所有页面上，但最后一个页面除外，并且似乎仅与scaleY有关（scaleX似乎工作正常）。

HTML CSS Google-Chrome PDF 生成

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

CSS transform：scale（）和打印到 PDF 损坏

CSS transform:scale() and print to PDF broken

评论

评论

CSS transform：scale（） 和打印到 PDF 损坏

CSS transform:scale() and print to PDF broken

评论

评论

CSS transform：scale（）和打印到 PDF 损坏