issue on IE11

[pkra]

The downcompiling example at https://github.com/mathjax/mathjax-v3/wiki/A-first-usable-demo-(using-webpack) does not work on IE11.

[pkra]

SCRIPT5009: 'Symbol' is undefined

[pkra]

I went a bit further. Since it's not really in the same direction, I've renamed the issue.

Regarding Symbol, this seems expected behavior:

Please note that this requires a native Symbol.iterator or Symbol.iterator shim at runtime for any non-array values.
https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#new---downleveliteration

Adding the babel polyfill gets me Symbol (obviously) so using the babel loader with es2015 in webpack would workaround this. (IIUC Symbol.iterator cannot be shimmed correctly in generality.)

Next I run into the following:

HTMLNodes.prototype.node = function (type, def, children) {
        if (def === void 0) { def = {}; }
        if (children === void 0) { children = []; }
        var node = this.document.createElement(type);
// ERROR Unable to get property 'createElement' of undefined or null reference
        this.setProperties(node, def);
        try {
            for (var children_1 = __values(children), children_1_1 = children_1.next(); !children_1_1.done; children_1_1 = children_1.next()) {
                var child = children_1_1.value;
                node.appendChild(child);
            }
        }

and if I hack those to the global document, I run into an error with documentStyleSheet (at which point I gave up).

[dpvc]

The issue with document may be because of how your initial test.js file references the DOM document. The contents of the test file seem to be put into a function with "use strict"; in the final webpacked version, which I believe may restrict the use of global variables. Try changing

const html = MathJax.document(document, {

to

const html = MathJax.document(window.document, {

instead. Or import DOM from utils/DOM.js and use

const html = MathJax.document(DOM.document, {

See if one of those does the trick.

[pkra]

Thanks, Davide. I'll test it.

[pkra]

I screwed up earlier and accidentally tested the TeX input (which has a whole other set of problems).

For the MathML input, the polyfill gets things up an running.

However, I get Math Processing error on all three elements - data-mjx-error="Can't call method on undefined".

So that's a step forward, I suppose.

[pkra]

Let's continue F2F later.

[pkra]

As requested during the last meeting, here's a hopefully sufficient demo for the IE11 math processing error problem.

IE11-demo.zip

Quick guide to re-build:

• put the files in a folder
• add/link to a copy of mathjax-v3 in a ./v3subfolder (or change mmlpage.js to point to the right place)
  • I used the stretchy-cells branch
• $ npm install wepback babel-loader babel-core babel-preset-env
• $ npx webpack
• Open the HTML file in the E11+Win7 VM from https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/
• see Math Processing Errors

Note: the HTML page also loads the babel polyfill from cdnjs; this can probably be done more efficiently and/or at build time.

[dpvc]

Thanks, I'll take a look at it this weekend.

[dpvc]

OK, it turns out that the issue is that, in IE11, the MathML elements don't have the classList property that HTML elements do (and the MathML elements do in other browsers), and so the places that MathJax uses Array.from(node.classList) in the MathML input jax fail for IE11. For IE11, one has to use node.getAttributes('class').split(/ /) to get the array, and when I change to that, the example works as expected. I'll look to see if there is any place else that this would affect things.

The output worked fine in IE11 and IE10 emulation, but two of the three equations caused output errors for IE9. I'll have to look into that further.

[pkra]

in IE11, the MathML elements don't have the classList property that HTML elements do

holy cow, that's terrible. (FYI same for SVG elements, https://caniuse.com/#search=classlist)

Any chance we could somehow polyfill this on IE11 (we'd need a polyfill for IE9 as well).

[dpvc]

Any chance we could somehow polyfill this on IE11 (we'd need a polyfill for IE9 as well).

The classList is only used in a couple of places, so I think we can certainly add a method that uses classList when it is available, and the other approach when it isn't. So yes, we can work it out without too much trouble.

[pkra]

https://github.com/eligrey/classList.js might be worth looking at (as it detects partial implementations).