IE: The Bane of My Print Queue
June 24th 2012"Why is this site taking 5 minutes to print?"
After having created a small site with Twitter Bootstrap, and releasing it to the local intranet I had to field this question. I did not have an answer.
As with most bugs in my sites, It ended up being a problem with Internet Explorer. The browser which is less than 20% my users, takes 60% of my (bug squashing) time.
In this instance, the application was designed to enable users to print a nice looking document. This document has a print @media style sheet associated with it. The print-only styles looked great when I printed them (even from IE). Unfortunately, I didn't realize the Internet Explorer spool file was such a pig:
I didn't know what to think when I saw this. I made a local copy of the spool and opened it in a hex editor to try and comprehend what's going on here.
Wat? Are those repeating pixel colors?
The culprit turns out to be a hidden gradient that IE insists on rendering for print. Here is the offending line in my CSS:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ffffff', GradientType=0);
Which is handily generated by the
Bootstrap #gradient mixins.
To fix, I simply had to disable the filter in the print stylesheet:
background-color: #fff;
filter:;
Also, if you can hide the entire element:
display: none;
That works too.
After this, my IE spool files returned to sanity at around 200KB.
This feature seems to be deprecated after IE9.
During the meager time I had for testing the site, I verified the look and feel in IE, but failed to realize how an enormously bloated spool file might effect print queues when there are even as few as ten print jobs being sent.
I created this page to test. While not as elaborate an example as the application to which I am referring, it still demonstrates the potential problem by generating a 17MB spool file for a white page.