CSS 转换：scale() 并打印到 PDF 损坏

Question

我正在使用 Chrome 生成 PDF：一切正常，直到某些

divs

包含以下用于缩小其内容的 CSS 转换：

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

可以在这里找到损坏页面的示例，完整的代码可以在本文末尾找到。

此示例创建两个

Letter

页面；每个页面包含两个并排的

divs

，覆盖每个

Letter

页面的整个高度。右侧

div

的内容使用 CSS 变换按比例缩小。一切在浏览器中看起来都很好。但是在打印页面时（无论是通过Chrome无头还是通过浏览器打印功能），第一页上缩小的div的高度

是错误的（其内容被正确缩小）。

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

编辑：此问题仅发生在除最后一页以外的所有页面上。

Answer 1

将“widgetScaled”类中的绝对位置更改为相对位置将解决该问题。

<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 转换：scale() 并打印到 PDF 损坏

问题描述投票：0回答：1

1个回答

最新问题

CSS 转换：scale() 并打印到 PDF 损坏

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1