RESOLVED FIXED 200261
iframe printing works in desktop Safari, but not mobile... 
https://bugs.webkit.org/show_bug.cgi?id=200261
Summary iframe printing works in desktop Safari, but not mobile...
Lou Mazz
Reported 2019-07-29 17:56:47 PDT
Created attachment 375132 [details] Instructions to replicate this bad behavior Once again, I've hit a wall with iOS printing after getting desktop Safari to work. The overall approach: - load some css in <head> - load some HTML in <body> - call contentWindow.print() Here's the code: //"Print" search results on item list (inventory) page // SAFARI VERSION DEPENDENT - assumes "sVersion" has correct Safari version $('#itemList .toolbar .printButton').live('click', function(event) { // Expand any telescoped items // $('#itemList #resultsBody ul li[id^="t"]').each(function() { // alert("opening "+ $(this).attr("id") ); // $(this).find('.tsIcon').trigger('click'); // }); if (sVersion > "5.0.6") if ($('iframe').html() != null) $('iframe').remove(); // newer Safaris require this done here var iframe = document.createElement("iframe"); // create an iframe so that no window pops up document.body.appendChild(iframe); // insert the element to the DOM // include a stylesheet for printing this stuff headHTML = "<link rel='stylesheet' href='css/rPrint.css'>"; var frame = $('iFrame #document'); var contents = frame.contents(); var body = contents.find('body'); var head = contents.find('head'); iframe.contentDocument.open(); iframe.contentDocument.write(headHTML); // write stylesheet link iframe.contentDocument.write(vendorName); // write header today = new Date(); dd = String(today.getDate()).padStart(2, '0'); mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0! yyyy = today.getFullYear(); today = mm + '/' + dd + '/' + yyyy; iframe.contentDocument.write(" - "+today); iframe.contentDocument.write("<span class='tm'>Made with <i>ShipIt</i>™</span><br>"); iframe.contentDocument.write(vuName+', '+vuPhone+"<br>"); if (vuEmail != "(none)") iframe.contentDocument.write(vuEmail+"<br>"); // Only display checked items $('#itemListStatus #resultsBody ul li input:checked').each(function() { $(this).attr("checked", "checked"); }); $('#itemListStatus #resultsBody ul li input:not(:checked)').each(function() { $(this).removeAttr("checked"); }); var clone = $('#itemListStatus').clone(); // don't trash the screen srCount = $(clone).find('#resultsHead #srCount').text(); $(clone).find('#resultsBody ul li input:not(:checked)').each(function() { $(this).parent().css("display", "none"); srCount--; }); $(clone).find('#resultsHead #srCount').text(srCount); iframe.contentDocument.write($(clone).html()); // write the results HTML to be printed iframe.contentDocument.close(); iframe.contentWindow.print(); // print it if (sVersion <= "5.0.6") $('iframe').remove(); // older Safaris get this done here, where it should be return true; }); The attachment lets you access the web app to experience correct behavior in desktop Safari, and the non-behavior in iOS. As an aside, Chrome is spotty - sometimes this code will work, other times you have to repeatedly hit "Print" to get the css rules to be applied. Clue? Any help appreciated on this one.
Attachments
Instructions to replicate this bad behavior (1.47 MB, application/zip)
2019-07-29 17:56 PDT, Lou Mazz 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2019-07-30 10:34:58 PDT
<rdar://problem/53716096>
Lou Mazz
Comment 2 2019-09-29 06:47:21 PDT
Agent reporting / checking bad. Caused iFrame to be removed too quickly for user to see it. Nothing wrong with the printing code. <begin self-flaggelation>
Note You need to log in before you can comment on or make changes to this bug.