how to make a strikethrough in jqmath in firefox

Question

Chrome on Left, Firefox on Right

We're using jqmath and would like to use the line-through text-decoration, as described here: How does one indicate strikethrough in jqmath?

This works in Chrome, but is not working in Firefox.

.deletedText {
    color: red;
    text-decoration: line-through;
}

...Neither of these will produce a line-through in FireFox (but both work in Chrome)

<li>$ \cl "deletedText"{ax^2+bx+c=0}$</li>
<li class="deletedText">$ax^2+bx+c=0$</li>

Any assistance is appreciated.

Answer 1

This is an issue with native MathML in Firefox. Firefox and Safari actually implement (large parts of) MathML, but the implementations don't always respect all CSS properties. This example works in Safari 10, for example, but I don't know if it will continue to work in Safari in the future. You could file a bug at mozilla. One problem is that MathML is not being actively worked on by the browser vendors (I am hoping this will change as schools get more computers, but I've been hoping for years/decades, sigh), and another problem is that the MathML spec was developed for non-CSS and pre-CSS (!) environments, and some might argue the spec doesn't explicitly state that all CSS properties must be implemented/respected.

If strikethrough is a requirement for you, then in the short-term you can turn off native (browser) MathML in javascript:

M.MathML=false;

Do this in a <script> that's after the <script src="..."> tag that you use to load jqmath.