Niechciany lewy margines podczas używania -webkit-transform: scale (...)

Question

Używam wkhtmltopdf (który używa mechanizmu renderowania Webkit) do konwersji plików HTML na dokumenty PDF. Wygenerowane pliki PDF to A4. Innymi słowy mają stałe wymiary, a więc ograniczoną szerokość.

Jedna z tabel w moim pliku PDF zawiera obrazy, które są misternie złożone w podobny do łamigłówek sposób i które czasami zajmują dużo miejsca.

Aby dopasować wynikową łamigłówkę do ograniczeń pliku PDF w formacie A4, stosuję właściwość CSS -webkit-transform: scale (...);

To pięknie układa puzzle, i nadal jest czytelne, ale z jakiegoś powodu przesuwa również stół zawierający puzzle po prawej stronie. Wydaje się, że dodałem znaczny margines na lewo od stołu układanki, mimo że wyraźnie ustawiłem lewą marżę na 0.

Co ciekawe, im mniejsza skala w mojej transformacji Webkit, tym większy margines po lewej stronie. Na przykład, jeśli używam skali (0,75), wynikowy lewy margines wynosi około 200 pikseli. Jeśli użyję skali (0,5), wynikowy lewy margines wynosi około 400 pikseli.

Próbowałem ustawić tablicę logiczną w lewo za pomocą absolutnego, stałego i względnego pozycjonowania za pomocą lewego: 0 Próbowałem również unieść go w lewo, a także przykleić w pojemniku z wyrównaniem tekstu ustaw na lewo. Żadna z tych technik nie działa.

Wszelkie pomysły, skąd pochodzi ten lewy margines i jak mogę go usunąć/obejść?

Answer 1

Po trochę prób i błędów, dodając następujący kod CSS do tabeli logicznej wystarczyły:

-webkit-transform-origin-x: 0; 

Więcej informacji na temat tej nieruchomości dostępne tutaj: http://css-infos.net/property/-webkit-transform-origin-x

UPDATE: patrz Richar- Komentarz dW poniżej dla obsługi wielu przeglądarek.