translate3d inside overflow:hidden leaks to second page when printed - css

Question

I'm working on generating report that contains a map. I use Mapbox for this purpose. I came across an issue with one of the tiles leaking out to the second page in print preview (tested in Chrome). I've spent most part of the day trying to tackle the issue. I seem to have figured out the root cause. Map tiles are placed on the element that is positioned using transform: translate3d. I've put together a simple example that demonstrates the issue.
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>
If you load it in Chrome (or PhantomJS) and open Print Preview (in Chrome of course) you will notice that green rectangle leaks into the second page.
However, if you change negative left offset (-100px) to positive, the problem goes away.
Any idea on how to fix this? There is an option to fetch the exact map region as an image which will require rebuilding a big part of the system as opposed to using Mapbox out of the box. So before going there I'd like to ask if anybody has solved similar issues before.
UPDATE:
#page {margin: 0} (suggested in the answer) didn't help. Here're the screenshots:
Without margin: 0
With margin: 0

Answer 1

You may be looking for #page { margin: 0 }
Before:
After:
However, for finer control, you could play with #media: print to get those reports nice and polished :)
Good luck!
Edit:
As you mentioned, the layout is Landscape. Portrait does "bleed" over the pages, like:
However, you can control the elements and when they break by using CSS like page-break-before or page-break-after. You then get something like this:
Portrait
Landscape
These have page-break-after applied to .another-block, with #page { margin: 0}