Chrome adding gray outline to printed transparent png/gif

Question

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:

Exhibit A:

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 <img /> tag) and press Cmd/Ctrl+P to bring up the print preview. You'll see this in the preview and if you print to .pdf. Make sure you have "Background colors and images" enabled, or you won't see any images.

Note: I'm not looking for workarounds after it's been printed and I'm aware that if you size the image to 100% and view the .pdf at 100% zoom you don't see the gray line. I need to programmatically (or otherwise) remove the gray line prior to printing the .pdf.

Answer 1

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.