This sample HTML code produces an output PDF where random portions of the text are output as an image. The text is still selectable, but the visual quality is poor.
This is a huge pain, as in more complex documents random small portions of the text with no text-shadow applied will become rasterized, producing a very poor looking document.
I narrowed the problematic CSS down to a text-shadow clause. Replace the rgba() with a solid color, and the output is fine.
See the output PDF here:
https://dl.dropboxusercontent.com/u/43207753/output.pdf
Code: HTML/ASPX
<html>
<head>
<style type="text/css">
div.shadow {
text-shadow: 1px 1px 0 rgba(255,0,0,0.5);
}
div {
padding-bottom:20px;
}
div.floatleft {
width: 200px;
float: left;
border: 1px solid black;
padding: 20px;
margin-right: 20px;
}
</style>
</head>
<body>
<div class="floatleft">
No shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow
</div>
<div>
No shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow
</div>
<div>
No shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow
</div>
<div>
No shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow
</div>
<div class="shadow">
Shadow
</div>
<div>
No shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow
</div>
<div>
No shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow
</div>
<div>
No shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow
</div>
<div class="shadow">
Shadow
</div>
<div>
No shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow
</div>
<div>
No shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow no shadow
</div>
</body>
</html>
Note to other people with the same problem: we were able to work around this in our site by adding the following to our print CSS:
Code: HTML/ASPX
* {
text-shadow: none !important;
}
*:before {
text-shadow: none !important;
}
*:after {
text-shadow: none !important;
}