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

webkit scale margin wkhtmltopdf webkit-transform
Kosta Kontos picture Kosta Kontos · Oct 23, 2012 · Viewed 9.7k times · Source

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?

Answer

Kosta Kontos picture Kosta Kontos · Oct 23, 2012

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.

Related questions

WebKit: Blurry text with css scale + translate3d

I'm seeing an issue where Chrome and other WebKit browsers massively blur any css-scaled content that also has translate3d applied. Here's a JS Fiddle: http://jsfiddle.net/5f6Wg/. (View in Chrome.) Are there any known workarounds for this? …

Read More
How to force re-render after a WebKit 3D transform in Safari

I'm using CSS 3D transformations to zoom a div, for example: -webkit-transform: scale3d(2,2,1); The scaling itself works fine in any WebKit browser. However, when using this on Safari (mobile or Windows), the content of the div is not re-rendered. …

Read More
Maximum call stack size exceeded error

I am using a Direct Web Remoting (DWR) JavaScript library file and am getting an error only in Safari (desktop and iPad) It says Maximum call stack size exceeded. What exactly does this error mean and does it stop processing …

Read More