Chrome使用CSS transform:scale()生成PDF时高度异常问题求助

使用Chrome生成PDF文件时，原本功能正常，但当部分div应用以下CSS缩放规则后出现异常：

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

问题场景 #

示例包含两个Letter纵向尺寸的页面，每页内有两个并排且铺满页面高度的div，右侧div通过上述CSS规则缩小内容。在浏览器中显示完全正常，但通过Chrome打印功能或无头模式生成PDF时，除最后一页外的所有页面中，缩放后的div高度出现异常（内容本身已正确缩放）。经测试，该问题仅与scaleY相关，scaleX工作正常。

完整代码示例 #

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

内容的提问来源于stack exchange，提问作者Marc Polizzi