Display:none Fehler mit PrintJS ⇐ JavaScript

[Anonymous]

Ich drucke kein unglaublich komplexes Div. Das Div wird mit nur einem einfachen CSS erstellt

Code: Select all

#print_this_div {display:none;}

nur Reihen mit Bildern und Titeln
es wird durch eine DRUCKEN-Schaltfläche mit js ausgelöst, die so aussieht:

Code: Select all

function libPrint() {
printJS({
printable: 'print_this_div',
type: 'html',
documentTitle: "My Pics and Names",
onError: function (error) {
alert("Printing Err: " + error.message)
},
});
}

Das funktioniert ganz gut, wenn ich das CSS wie folgt habe:

Code: Select all

#print_this_div {visibility:hidden;}

dies schlägt fehl:

Code: Select all

#print_this_div {
display:none;
visibility:hidden;
}

Die andere Seltsamkeit ist, dass es gestern auf Chrome funktionierte, aber nicht auf Safari und Firefox. und funktioniert jetzt nicht auf Chrome.
Also ... inkonsistentes Verhalten. Hat jemand irgendwelche Ideen?
Update
So habe ich es vorübergehend umgangen:
Für mich konnte display: none nie funktionieren. Also habe ich mit dem CSS herumgehackt und mit dem Timing gespielt.
Ich habe alle Testrückrufe beibehalten, damit Sie sehen können, was ich versucht habe, und selbst herumspielen können, falls jemand das gleiche Problem hat. Es besteht eine hohe Wahrscheinlichkeit, dass es sich hierbei um eine Art Rando-Hosting-/Cache-/Migrations-/zu-viele-Hände-im-Pot-Problem handelt

Code: Select all

function libPrint() {
printJS({
printable: 'print_this_div',
type: 'html',
documentTitle: "My Pics and Names",
// onLoadingStart: printPre(),
// onPrintDialogClose: printPost(),
onError: function (error) { printErr(error); },
}

function printPre() {
setTimeout(function () { alert("Give it a few seconds to download... ") }, 1000);
}

/** this doesnt actually wait till the dialog close button - FAIL
*  it runs immediately

* PS known issue according to github
*/
function printPost() {
// setTimeout(function() { alert("Finished");} , 10000);
}

function printErr(error) {
alert("Printing Err: " + error.message);
console.error('Print error:', error);
}

jQuery(document).ready(function ($) {
$('.my-button').on('click', function () {

alert("Give it 5 seconds to process and download... ");
$('#print_this_div').css('display', 'block');
setTimeout(libPrint, 5000);

setTimeout(function () {
$('#print_this_div').css('display', 'none')
}, 7000);
})
});

Ich wünschte wirklich, ich müsste diesen Hack nicht einbauen, aber ich musste das Problem für meine App lieber früher als später lösen.
Wenn es eine bessere Antwort gibt, würde ich sie gerne sehen