Selecting printer on Safari + Chrome on iOS removes print preview, prints blank page

[evanb2]

Describe the bug
Print Preview disappears (and prints a blank page) after selecting a printer on Chrome and Safari iOS.

To Reproduce
On Safari iOS:

1. Go to Demo page
2. Click on either "Print Container" or "Print Kittens"
3. Select a printer
4. Print preview refreshes and disappears
5. Prints a blank page

Expected behavior
Print preview will persist after selecting a printer.

Smartphone (please complete the following information):

• Device: iPhone 8+
• OS: 13.3
• Browser: Safari

Additional context
The same bug occurs on iOS Chrome after applying the fix mentioned here

Setting debug: true fixes the problem.

[evanb2]

Update: looks like increasing the timeout for removing the iFrame is a fix.

// remove iframe after print
if (!opt.debug) {
  setTimeout(function() {
    $iframe.remove();
  }, 10000); // -> this was previously 1000
}

[evanb2]

Increasing the timeout is the masking the real problem here.

After digging in some more I've noticed a difference between desktop and mobile behavior. On desktop, when you open the print dialog the iFrame remains in the DOM indefinitely. You can click around the modal, select your printer, etc. On mobile, opening the print dialog the iFrame is removed as soon as its timeout is reached. Once that happens, if you select a different printer the preview will disappear, even if you do nothing and just wait out the timeout you'll still get a blank page upon printing.

So it seems like the browser's print dialog pauses the printing process on desktop, but not on mobile.

[jasonday]

Thanks for digging in @evanb2 , this explains a lot and is likely similar/same to #152

This has implications across the board and will require more digging and potential rework (removing timeouts and going full event based, which is challenging due to the differences in events across browsers and OSs

[jasonday]

One option is to not remove the print iframe at all. This goes against the best practice of not removing things added to the DOM when done, but it may solve the issue.

I could always add a check for any iframes with a specific class and remove them prior to the construction of the new print iframe.

@oculus42 what do you think?

[evanb2]

@jasonday Issue #152 seems unrelated. I implemented the fix you suggested in the comments, which worked to initiate printing on Chrome iOS (the print dialog wasn't even opening previously).

The issue I'm describing here happens on Safari/Chrome iOS even with that fix applied.