Print styles overriding screen styles after AirPrint in iOS webview

Question

I am working on a HTML5 / iOS hybrid application that uses Safari Webview. We use AirPrint so that the user can print the contents of the web view. The problem that I encountered is that after opening the print dialog box, the print styles affect the screen, and even after printing is completed or canceled, they do not disappear. This does not happen in our Windows or Android versions of the application, which use CEF and Android System Webview, respectively. The print styles in these versions of the application apply only to the printout, as expected.

Does anyone have experience using AirPrint with Safari Webview that can shed light on a solution? I only looked at adding / removing a link tag containing CSS with javascript before and after printing, but which seems to be hacked and does not answer the curious question of why print styles are applied to the screen.

Any help appreciated! Sorry, there is no real way to attach code to this!

Answer 1

Yes, this is really not the expected behavior. However, we can try to solve this problem using JavaScript.

Theory When printing is complete, reload the style sheets. The browser will fill the page again and hopefully use the screen definitions.

Practice . Since we do not have a JavaScript callback after printing, you can try reloading the styles using the window.onfocus event, as follows:

function updateStylesheets(){ var links = document.getElementsByTagName("link"); for (var x in links) { var link = links[x]; if (link.getAttribute("type").indexOf("css") > -1) { link.href = link.href + "?id=" + new Date().getMilliseconds(); } } } window.onfocus = updateStylesheets; 

In detail, it captures all the <link> tags and adds a random number after, forcing the style sheets to reload.

Please let me know if this works, I would be happy to help.