window.matchMedia('print') failing in Firefox and IE

Question

I have a print button that launches the print functionality on any webpage. The button hides as soon as the user clicks on it and shows if the user is done printing or presses c

Answer 1

You might want to look at the onafterprint event. At least this is triggered by Firefox and IE, so with a potential guard (to make sure the event did not fire multiple times) for your use case you can listen to both the matchMedia("print") and the onafterprint event.

Answer 2

Unfortunately, I am on the same problem as you and I did some research. For now it seems that the bug exists on recents version of FF and IE still and it hasn't been fixed.

You can check out this bug for Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=774398

I found another person having the same issue as us and it hasn't a really satisfying answer: https://social.technet.microsoft.com/Forums/office/en-US/bc3ca05e-b4ef-425b-8bbd-d3f700a8c85e/windowmatchmedia-not-firing-for-print-in-ie?forum=ieitprocurrentver

If I ever come accross any solution, I will edit this.

I mostly use the same code as you as exemple for highchart to resize before printing:

function printUpdate() {
    jQuery.each(Highcharts.charts, function(index, value){
        value.reflow();
    });
};
var mediaQueryList = window.matchMedia('print');
if(navigator.appVersion.indexOf("MSIE 8.")!==-1)//For IE8
{
    document.attachEvent(function (mql){printUpdate();}, mediaQueryList);
}
else
{
    if (window.matchMedia) {
        mediaQueryList.addListener(function (mql) {
            if (mql.matches)
            {
                printUpdate();
            }
        });
    }
}

window.onbeforeprint = printUpdate;

This work fine in chrome. But FF and IE11 won't fire the event.