Chrome CSS transform：scale()and print to PDF broken

vpfxa7rd 于 2023-11-14 发布在 Go

关注(0)|答案(1)|浏览(141)

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

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

字符串
一个坏页的例子是here，完整的代码可以在这篇文章的末尾找到。
此示例创建两个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>

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

google-chrome

来源：https://stackoverflow.com/questions/77447447/css-transformscale-and-print-to-pdf-broken

1条答案

按热度按时间

0s0u357o1#

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

字符串

赞(0）回复(0）举报 2023-11-14

我来回答

Chrome CSS transform：scale()and print to PDF broken

1条答案

相关问题

热门标签

最新问答