翻译中的translate3d：打印时隐藏的泄漏到第二页

Question

我正在制作包含地图的报告。我为此目的使用Mapbox。我遇到了一个问题，其中一个图块在打印预览中泄漏到第二页（在Chrome中测试）。我花了一天的大部分时间试图解决这个问题。我似乎已经找到了根本原因。地图图块放置在使用transform: translate3d定位的元素上。我已经汇总了一个展示这个问题的简单例子。

html {
  -webkit-print-color-adjust: exact;
}

.container {
  width: 500px;
  height: 800px;
  border: 1px solid blue;
  position: relative;
  overflow: hidden;
}

.tile {
  width: 500px;
  height: 800px;
  transform: translate3d(-100px, 300px, 0px);
  background-color: green;
}

.another-block {
  width: 500px;
  height: 400px;
  border: 1px solid red;
}

<div class="container">
  <div class="tile"></div>
</div>
<div class="another-block"></div>

如果您在Chrome（或PhantomJS）中加载它并打开打印预览（当然在Chrome中），您会注意到绿色矩形泄漏到第二页。 但是，如果将负左偏移量（-100px）更改为正值，问题就会消失。

有关如何解决此问题的任何想法？有一个选项可以将精确的地图区域作为图像获取，这需要重建系统的大部分，而不是使用开箱即用的Mapbox。所以在去那里之前我想询问是否有人之前已经解决了类似的问题。

更新

@page {margin: 0}（答案中建议）没有帮助。这是截图：

• 没有保证金：0

• 保证金：0

Answer 1

您可能正在寻找@page { margin: 0 }

在：

在：

然而，为了更好地控制，您可以使用@media: print来获得这些报告的美观和精致：）

祝你好运！

编辑：

正如您所提到的，布局是横向。肖像确实＆＃34;流血＆＃34;在页面上，如：

但是，您可以使用page-break-before或page-break-after等CSS来控制元素及其中断时间。然后你得到这样的东西：

肖像

风景

这些page-break-after已应用于.another-block，@page { margin: 0}