如何解决打印网页时元素出现空白间隙的问题？

问题场景 #

我制作了一个极简网页，打印后会呈现两个绿色页面，每个页面居中显示一个蓝色盒子。实现方式是创建两个页面尺寸的绿色div，每个div内的蓝色div通过绝对定位至左上角50%位置后平移-50%的通用居中技术实现居中。

代码实现 #

CSS

body {
  /* red */
  background-color: #ffb7b7;
  margin: 0;
}

div.page {
  /* green */
  background-color: #a2ffb5;
  border-radius: 1in;
  width: 11in;
  height: 8in;
  overflow: hidden;
  position: relative;
}

div.box {
  /* light blue */
  background-color: #e2e5ff;
  /* dark blue */
  border: 7pt solid #7e89ff;
  border-radius: 1in;
  width: 5in;
  height: 5in;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media print {
  @page {
    margin: 0;
    size: landscape;
  }
  div.page {
    break-before: page;
    break-inside: avoid;
    page-break-inside: avoid;
    width: 100vw;
    height: 100vh;
  }
  div.box {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

HTML

<div class="page">
  <div class="box"></div>
</div>
<div class="page">
  <div class="box"></div>
</div>

问题现象 #

网页在浏览器中显示正常，但打印时（包括打印预览、实际打印、生成PDF），第一页的蓝色盒子中间会出现奇怪的空白间隙，且该间隙仅影响第一页，最后一页不受影响。尝试使用break-inside: avoid和page-break-inside: avoid属性后无效果。

解决方案 #

方案1：触发硬件加速修复transform渲染bug #

这种间隙通常是浏览器打印引擎对transform元素的渲染异常导致的，给绝对定位的盒子添加translateZ(0)触发硬件加速，可规避该问题：

修改.box的CSS：

div.box {
  /* light blue */
  background-color: #e2e5ff;
  /* dark blue */
  border: 7pt solid #7e89ff;
  border-radius: 1in;
  width: 5in;
  height: 5in;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(0); /* 添加此行 */
}

方案2：改用Flex布局替换绝对定位居中 #

绝对定位+transform的组合在打印场景下存在兼容性隐患，改用Flex布局实现居中是更稳定的方案：

1. 修改.page的CSS，开启Flex布局并设置居中：

div.page {
  /* green */
  background-color: #a2ffb5;
  border-radius: 1in;
  width: 11in;
  height: 8in;
  overflow: hidden;
  /* 移除position: relative，添加Flex相关属性 */
  display: flex;
  justify-content: center;
  align-items: center;
}

2. 移除.box的绝对定位和transform属性：

div.box {
  /* light blue */
  background-color: #e2e5ff;
  /* dark blue */
  border: 7pt solid #7e89ff;
  border-radius: 1in;
  width: 5in;
  height: 5in;
  /* 移除position、top、left、transform */
}

原理说明 #

• 方案1通过translateZ(0)强制浏览器使用GPU渲染元素，避免打印引擎对transform元素的分页计算错误；
• 方案2使用Flex布局实现居中，无需依赖transform，从根源上避免了打印时的渲染兼容性问题，同时代码结构更清晰。

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