Missing MathJaX in the duplicate subtab of the close review queue

Question

When I review a question with a vote to close as duplicate, I see MathJaX formatting for the question body, but not in the tab that shows the proposed duplicate. Chrome 23.0.1271.17 beta in case it matters.

Answer 1

This seems to be a common issue in various less thoroughly tested parts of the Stack Exchange code base. For example, it also happens in the 10k flag review for any posts hidden behing the "show already flagged posts" link.

The fundamental cause of this bug is a combination of the following issues:

• When the duplicate tabs (and various other hidden-by-default parts of the SE user interface) are initially loaded, they're marked as hidden by giving them the class dno, which is styled in the site CSS as:

  .dno { display: none }
  

• On Stack Exchange sites that use MathJax, the TeX preprocessor is explicitly configured not to look for math inside any elements with the dno class, presumably as a performance optimization.

• In various parts of the Stack Exchange code that deal with toggling item visibility, the showing of previously hidden items is often done simply by calling the jQuery .show() method. This method adds an explicit display: block style to the element that overrides the display: none rule for the dno class. However, it does not actually remove the class from the element, nor does it tell MathJax that the element would need to be re-typeset.

The proper way to fix this would, arguably, be for the Stack Exchange UI code to define its own "show a hidden element" method that was aware of these issues, and then systematically use that method instead of the plain jQuery .show() method.

In the mean time, however, an alternative fix is to modify the jQuery .show() method itself to remove the dno class and queue a MathJax typeset pass, like this:

var oldShow = $.fn.show;
$.fn.show = function () {
    this.filter('.dno').hide().removeClass('dno').each( function () {
        typeof(MathJax) !== 'undefined' &&
            MathJax.Hub.Queue(['Typeset', MathJax.Hub, this]);
    } );
    return oldShow.apply(this, arguments);
};

Conveniently, this fix can also be implemented as a user script without changing any of the Stack Exchange code. I've included this fix in version 1.6 of the Stack Overflow Unofficial Patch, a collection of client-side CSS and JavaScript fixes for the Stack Exchange network.