Álvaro González

Google Chrome shows extra borders when printing

Recommended Posts

I've just switched to the JavaScript renderer because managed printing was taking several minutes to prepare charts on Google Chrome. To my surprise, graphs are printed exactly like in the screen in all browsers except Google Chrome. Here's a screenshot of a "MSCombiDY2D.swf" chart—on screen look on top, print preview on bottom:

 

ohwe.png

 

 

According to Chrome console that element is a <rect> tag and I haven't set a single CSS rule for such tags.

 

Do you have any idea of where those black boxes come from?

Share this post


Link to post
Share on other sites

Alright, I found where it comes from. This is what the bands look like:

<rect x="66" y="84.20000000000002" width="432" height="52.19999999999999" r="0" rx="0" ry="0"
fill="#eeeeee" stroke="#000" fill-opacity="0" stroke-width="0.000001" style=""></rect>

For whatever reason, Google Chrome renders stroke-width="0.000001" as a thick line when printing. This workaround seems to do the trick:

@media print{
    rect[stroke-width="0.000001"]{
        stroke-width: 0;
    }
}

Share this post


Link to post
Share on other sites
Guest Sashibhusan

Hi,

 

Glad to know that you have managed of your own to resolve the issue. :)

Share this post


Link to post
Share on other sites

Thanks Alvaro. I had this issue with StackedColumn2D graph. Adding the below lines to my css resolved the issue.

 

/************ START: chrome fixes ******************************/

rect[stroke-width=0.000001]{

    stroke-width: 0;

}

/************ END: chrome fixes ******************************/

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now