Margine sinistro indesiderato quando si utilizza -webkit-transform: scale (...)

Question

Sto utilizzando wkhtmltopdf (che utilizza il motore di rendering Webkit) per convertire i file HTML in documenti PDF. I PDF generati sono A4. In altre parole, hanno dimensioni fisse e quindi una larghezza limitata.

Una delle tabelle nel mio PDF contiene immagini, che sono complicatamente riunite in un modo simile a un puzzle, e che a volte occupano molto spazio.

Per adattare il puzzle risultante ai vincoli di un PDF A4, sto applicando la proprietà CSS -webkit-transform: scale (...);

Questo ridimensiona il puzzle magnificamente, ed è ancora chiaramente leggibile, ma per qualche motivo spinge anche la tabella contenente il puzzle a destra. Sembra che si aggiunga un margine significativo a sinistra del tavolo dei puzzle, nonostante abbia impostato esplicitamente il margine sinistro su 0.

È interessante notare che più piccola è la scala nella mia trasformazione del webkit, maggiore è il margine a sinistra. Ad esempio, se uso la scala (0,75) il margine sinistro risultante è di circa 200 pixel. Se uso la scala (0,5) il margine sinistro risultante è di circa 400 pixel.

Ho provato ad allineare la tabella dei puzzle a sinistra utilizzando il posizionamento assoluto, fisso e relativo con sinistra: 0. Ho anche provato a fluttuare a sinistra, così come incollarlo in un contenitore con allineamento del testo impostato a sinistra. Nessuna di queste tecniche funziona.

Qualche idea da cui proviene questo margine sinistro e come posso rimuoverlo/aggirarlo?

Answer 1

Dopo un po 'di tentativi ed errori, aggiungendo il seguente codice CSS per la tavola di puzzle ha fatto il trucco:

-webkit-transform-origin-x: 0; 

Maggiori informazioni su questa proprietà disponibili qui: http://css-infos.net/property/-webkit-transform-origin-x

UPDATE: vedi Richar- commento di dW sotto per supporto cross-browser.