The page I am working on has a javascript function executed to print parts of the page. For some reason, printing in Safari, causes the window to somehow update. I say somehow, because it does not really refresh as in reload the page, but rather it starts the "rendering" of the page from start, i.e. scroll to top, flash animations start from 0, and so forth.
The effect is reproduced by this fiddle: http://jsfiddle.net/fYmnB/
Clicking the print button and finishing or cancelling a print in Safari causes the screen to "go white" for a sec, which in my real website manifests itself as something "like" a reload. While running print button with, let's say, Firefox, just opens and closes the print dialogue without affecting the fiddle page in any way.
Is there something with my way of calling the browsers print method that causes this, or how can it be explained - and preferably, avoided?
P.S.: On my real site the same occurs with Chrome. In the example fiddle Chrome seems to not show the same behaviour as Safari, though.
Edit: I also tried to have the printing button on a different tag than an a anchor, like span or button , but that didn't help with the problem.
Edit: I run into this problem with Safari 5.1.2 on Mac OS 10.6.8. In the jsfiddle example, the behavior shows as a white "flicker" that covers the whole browser after having clicked the print button and closing (either printing or aborting) the print dialogue.
Edit: Just started a bounty for this question, as I am still looking for an explanation for this browser behaviour. I am more than willing to give more details on the issue. From my experience on SO it is not adviseable to post links to online pages, however I feel the problem is really hard to reproduce. I think the "flicker & re-render" I experience with the posted jsfiddle is hopefully is result of the same problem.
Edit: As explained in the comments, opening a new window containing the current state of the application, then printing and closing that window, might be a fix, but I don't consider it a sufficient answer to the problem at hand.
Source: Tips4all
I'm not sure if this will fix your problem but i recently found a very good Jquery plugin to print only certain part of your webpage.
ReplyDeleteYou should give it a try :) It has a some very cool parameters to customize it to your needs.
Take a look here.
Why does your page refresh? Here's my answer on that. the window.print() function will print the entire content of your page. So since i read that you only want to print a part of the page, I guess you are using some function to remove all unwanted content from the page for a very short moment, then you call the window.print() function and after that you put all orignal content again on the screen. This results in a very short flash that will look like your page is refreshing and will load all flash parts again.
I had the same problem yesterday and this jquery plugin really helped me out. I hope it will help you too.
Have a nice day!
If you can't figure a way to fix the problem you might get a quick fix this way:
ReplyDeletevar win=window.open() the same page you are on
then win.print() it, then win.close(). Hope this helps.
Sadly, I don't have a solution. but since I was able to reproduce this in Safari and Webkit with the fiddle, I thought I'll at least offer my observations:
ReplyDeleteThe white-out doesn't happen if you hit Print dialog button right away. You need to wait few seconds before you hit Print to be able to see the white. On OSX 10.6.8 I see the threshold marked by appearance of the spinning beachball.
When the mouse stays stationary since the Print button hit, the page stays white until you move the mouse again (beachball still spinning).
Hope this will help somehow.
Since it seems window.print() is not part of any standard, browsers are free to implement it in any way they choose.
ReplyDeleteThe only work-around I can see, if you really have to leave the page as-is, would be to open another window and print that. Which is a whole other, possibly worse, can of worms.
Try this in your function:
ReplyDeletedocument.write("<script type='text/javascript'>window.print()</script>");
I am referencing this stack:
After window.open, can't print in Safari for Mac
Update, Try:
document.writeln("<script type='text/javascript'>window.print()</script>");