I'm working on a printing template in the browser for print-to-pdf, and am using a transparent .png overlay in one section.
This happens both with transparent .png files and transparent .gif files:
Chrome, when printing (both to .pdf, and in the print preview window), seems to outline transparent images with a 1px gray line:
I've tried this in several other browsers (including Safari) and none appear to do what Chrome does. Has anyone seen this before? I need to find a way to disable it or hack it on the Chrome side so that this will work across browsers.
To see this in action, click here: http://jsfiddle.net/brandonscript/nELwd/ (just an
I have experimented enough and considered all the answers above while doing so. Suspiciously, Upon saving your image and opening in gimp and some pokes into it, What I found was this.
Which makes me think that your image in truth, containing the gray border around it. My suggestion is you remove that layer and make that empty space around the actual image to transparent.
EDIT(response to @remus comment)
I do not know if my claim is correct, but I am believing that the image is not what you are expecting it to be. You need to correct that image. I have tested with
another image of mine, pasted on the fiddle is not having any border around it in screen and print preview. (And the final pdf too). Sorry if this Answer is correct and hurts you.