Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 968
Kosta Kontos Avatar asked Oct 23 '12 13:10

Kosta Kontos


1 Answers

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.

like image 94
Kosta Kontos Avatar answered Sep 29 '22 13:09

Kosta Kontos