Chrome print preview error

Question

I want to print a html page. The html page is developed by me, this page can be printed with mozilla, ie.

In Chrome: when pressing CTRL+P it brings up the preview window, but it says: "Print preview failed", and i can't print anything. In opera it doesn't brings up the print window, nor from pressing CTRL+P nor from Menu->Print, Safari prints a white page.

Do you have any ideas what could be wrong? What kind of error can cause this problem? Is there any error log for chrome, to figure out what is wrong?

EDIT

I tried removing html elements, css scripts, javascripts, and i found out that one of my css file is blocking the print preview, i will go one, and will try to remove blocks from the css, i hope i can find this way where is the error.

EDIT 2

No success... Is there a possibility, that the css is to large for the browser to compile it? the css has imports inside, i tried to remove them, but this doesn't resolved my problem... Any other suggestions?

EDIT 3 I have the following:

<link rel="stylesheet" href="/css/style.default.css" type="text/css" media="all"/>
<link rel="stylesheet" href="/css/myStyle.css" type="text/css" media="all"/>
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print"/>

If I comment the first include, or change the media to screen for style.default.css then the preview is generated, but with missing css rules. The style.default.css is my global css, it has 17 other css imported into it this way:

@import url('jquery.ui.css');
@import ...

I have tried to comment the imports, and tried only with the css rules from that file. (If the error came from one of the imports, this should fix the problem), but this didn't fixed it, so i tried =the other way around, commenting the css rules, and try only with the imports, same result. Only success if i comment the whole file...

Any other suggestions? Somebody knows if chrome is logging somewhere such errors?

Answer 1

Finally i found the error. 2 css rules have blocked the browser from generating the preview:

min-height: 100%;
height: 100%;

and

position: fixed;

Answer 2

I know that i might be a little bit late to the party but I hope that this would help others in future.

The problem with print previews are often connected with styling. Some properties could break down our preview, and we could spend long hours before we solve this issue.

Here are some most common attributes that could induce this bug: height, position, overflow. It's a must to remember that for printing:

• height: 100%,
• position: fixed/absolute/relative (in some cases),
• overflow: hidden,

are 'the last nail in the coffin'.

None of container should have them set. For position you can use static, for height use fixed values or just leave an auto option. Always remember to set overflow: visible. Otherwise the thing we want to print could be hidden.

Also I have written a short article about printing in Ionic where I explained a topic a little bit more. You can find it here: http://blog.primemodule.com/print-style-sheets-in-ionic-framework/