Unwanted left margin when using -webkit-transform: scale(...)

Question

I am using wkhtmltopdf (which uses the Webkit rendering engine) to convert HTML files to PDF documents. The generated PDFs are A4. In other words, they have fixed dimensions, and thus a limited width.

One of the tables in my PDF contains images, which are intricately pieced together in a puzzle-like fashion, and which sometimes take up a lot of room.

To fit the resulting puzzle in the constraints of an A4 PDF, I am applying the CSS property -webkit-transform: scale(...);

This scales the puzzle beautifully, and it is still clearly legible, but for some reason it also pushes the table containing the puzzle to the right. It seems to be adding a significant margin to the left of the puzzle table, despite my explicitly setting its left margin to 0.

Interestingly enough, the smaller the scale in my webkit transformation, the bigger the margin on the left. So for example, if I use scale(0.75) the resulting left margin is around 200 pixels. If I use scale(0.5) the resulting left margin is around 400 pixels.

I've tried aligning the puzzle table to the left using absolute, fixed and relative positioning with left: 0. I've also tried floating it to the left, as well as sticking it in a container with text-align set to left. None of these techniques work.

Any ideas where this left margin is coming from and how I can remove it / work around it?

Solution

After a bit of trial and error, adding the following CSS code to the puzzle table did the trick:

-webkit-transform-origin-x: 0;

More info on this property available here: http://css-infos.net/property/-webkit-transform-origin-x

UPDATE: see Richar-dW's comment below for cross-browser support.

Comments

[Richard de Wit]

For crossbrowser support: transform-origin: 0 50% with -ms and -webkit prefixes. Source

[patrick]

@Richard-dW's solution also works in FireFox, the original one doesn't. You might want to add this as the answer