Currently (29-8-2016) there is an issue in Chrome relating to how print stylesheets are applied when printing. Other browsers do not have the same behaviour. The problem like how we came across it is also described in the Chromium bugtracker where it has been marked as fixed. The issue will be resolved in a future Chrome version (probably Chrome 54). I will attempt to show how the bug behaves and why the issue is not yet entirely resolved in some cases.
As an example that should clearly show the bug we use the following stylesheet:
.base {
background: lightgrey;
border: solid 1px black;
overflow: visible;
height: 40px;
width: 500px;
}
.transition {
transition: width 10s;
}
@media screen and (min-width: 1600px) {
.widescreen {
width: 1500px;
}
}
@media print {
.print {
width: 300px;
}
}For each available combination of classes we create a row in our HTML:
<body>
<div class="base">1 base</div>
<div class="base print">2 base print</div>
<div class="base widescreen">3 base widescreen</div>
<div class="base print widescreen">4 base print widescreen</div>
<div class="base transition">5 base transition</div>
<div class="base transition print">6 base transition print</div>
<div class="base transition widescreen">7 base transition widescreen</div>
<div class="base transition print widescreen">8 base transition print widescreen</div>
</body>You can try out the effect of these combinations of classes yourself in this full example.
On a small screen only the class base is applied and every bar is 500px wide. When the size of the screen is increased the media query with class widescreen joins in and widens 3 and 4 immediately and 7 and 8 more slowly because of their transition class. So far everything is working as expected.
When printing using the browser's built-in print functionality however, it starts to behave oddly. In Firefox, Internet Explorer and Edge the result is as it should. Every bar with the print class is reduced to a width of 300px when printing; the widescreen media query is not applied, as it should only apply in 'screen' mode. In the current version of Chrome (52) however, the print styling does not appear to have any effect on elements which have a transition rule (bars 7 and 8).
Example of a correct print preview (Edge)
Example of an incorrect print preview (Chrome 52)
However, when we reduce the screen width so that the widescreen media query is not applied before printing, the print result is correct.
Why this happens
Unlike other browsers, Chrome does not cancel already running transitions when switching from the 'screen' to 'print' render mode. What this means is that for elements currently being animated, it uses the animated properties instead of those used by the print stylesheet.
Currently, this issue is more visible because of an error in how the page size is applied. Currently, the smaller printing page size is applied before switching the rendering mode to 'print'. The change in page size causes the animation to start because of the widescreen media query that no longer applies. When the print preview is generated the bar size is still 1500px (or close to it). This has been corrected: the resizing in a future version of Chrome will occur later in the process, which results in no animation being applied.
However, the underlying issue where the animation on an element is not cancelled when switching to printing mode has not been changed. This can be tested by resizing the window and printing while the animation is running.
I hope this may be useful for someone trying to figure out why their Chrome is sometimes printing incorrectly.
