Firefox从横向切换至固定纵向页面时打印预览异常问题

问题描述 #

我使用以下CSS代码实现打印页面固定为纵向（portrait）：

@media print {
    @page {
        size: portrait;
    }
}

但在Firefox浏览器中，若先打印任意横向（landscape）页面，再打开我的固定纵向页面执行打印操作时，打印预览界面会出现异常：

只有修改打印选项（例如将“全部页面”改为“当前页面”）后，预览才会更新并恢复正常：

起初我以为是本地Firefox的问题，升级到最新版本126.0.1后，还在另一台Windows电脑上测试，初始预览仍存在异常。

复现步骤 #

• 打印任意横向页面
• 在Firefox中打开下方示例页面
• 执行打印操作
• 打印预览会呈现上述异常状态

可复现的示例页面代码 #

<html>
<head>
<style>
    body {
        margin: 0;
        padding: 0;
    }

    @media print {
        @page {
            size: portrait;
        }
    }
    
    .outer {
        width: 100vw;
        height: 100vh;
    }

    .outer > * {
        width: 49%;
        height: 49%;
        display: inline-flex;
        border: 1px solid #ff0000;
    }
</style>
</head>
<body>
    <div class="outer">
        <div>a</div>
        <div>b</div>
        <div>c</div>
        <div>d</div>
    </div>
</body>
</html>

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