Printing HTML page alignment on OSX Chrome

Question

I have a html page: http://www.newsryde.com/article/1127950

I have implemented a css stylesheet using:

<link href="/css/jm/v2/print.css" rel="stylesheet" type="text/css" media="print" />

part of my css says the following:

html,
body{
    width:670px !important; /* based upon http://stackoverflow.com/questions/320357/ */
    background:white;
    margin:0 !important;
    position:relative;
    left:0;
}

however when i go to print, the page doesnt align the content to the left.

my question is, how do i align the non-emulated page to the left such that it looks like the emulated page?

When i go into DevTools and emulate the print stylesheet everything moves correctly to the left hand side, THEN going to print works nicely. here are some screenshots to help explain:

Not emulated first print preview:

Emulated, then print preview:

---

SOLUTION

Thanks to Rolan Lu for the tipoff about transitions. I added the following to the top of the print.css file:

*,
*:after,
*:before{
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    -ms-transition: none !important;
    transition: none !important;
}

Answer 1

Do you still have this problem? I had the exact same issue.

I had a padding on an element and wanted to remove it in the print view. I found the issue in an existing transition for this padding.

Something like this:

body {
  -webkit-transition: padding 0.3s;
  padding: 20px;
} 

Solution for me was to remove this transition for the print view.

Like:

@media {
  body {
    padding: 0;
    -webkit-transition: none;
  }
}