firefox confuses mathjax about the sizes of things

RESOLVED INVALID

Status

()

Core
General
RESOLVED INVALID
4 years ago
4 years ago

People

(Reporter: jesse.mckeown, Unassigned)

Tracking

24 Branch
x86_64
Linux
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

4 years ago
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:24.0) Gecko/20100101 Firefox/24.0 (Beta/Release)
Build ID: 20130910160258

Steps to reproduce:

The website is a tumbl, attempting to use intensedebate comments, including mathjax.
example comment-full post 
http://jessecmckeown.tumblr.com/post/45373754589/measuring-cycloids

script has been added to the intensedebate account to escape/unescape characters id would strip but which are used by mathjax, and to queue typesetting of math in comments once the unescaped comment text is present in the page.


Actual results:

In firefox 24 in 64- or 32-bit linux (debian 7 or 7.1), or in 64-bit windows7, page and comments generally load successfully, and mathjax does process math in comments more-or-less on time, BUT when using HTML-CSS or SVG output, gets the sizes of things badly wrong, especially subscripts and superscripts.


Expected results:

even if context suggests math in comments should be typeset at a different scale, the relative sizes of typeset objects should not be reversed!

[opera nor chromium] (64-bit linux) exhibits this problem.
(Reporter)

Comment 1

4 years ago
... beg your pardon: *neither* opera nor chromium et.c.
Frédéric, any idea what's up here?
Flags: needinfo?(fred.wang)
I suspect this is related to some conflicts between the CSS of your page and MathJax. I'd recommend to try without CSS layout first and, if that solves the issue, to try to disable some CSS rules to find which one causes the issue. In particular, MathJax tries to make the font-size of the equations match the one of the surrounding text ; so if you have @font-face rules to load Web fonts then MathJax can do a (wrong) measure before the Web fonts arrive.

Alternatively, you can configure MathJax to use Gecko's native MathML. In general that reduces potential conflicts with CSS and MathJax and that seems to solve your problem here:
https://developer.mozilla.org/en-US/docs/Web/MathML/Authoring#mathjax
https://developer.mozilla.org/en-US/docs/Mozilla/MathML_Project/Fonts
Flags: needinfo?(fred.wang)
(Reporter)

Comment 4

4 years ago
Well, I've turned off all the web-fonts I can find myself asking for (except for MathJax), and it didn't help.  Further emphasizing in intensedebate's css not to do anything about fonts also doesn't help.

I should also mention that the bad typesetting persists through mathjax re-typesetting cycles, which do not involve any more http fetches, so that the issue isn't *missing* information.  At that point, whatever font information is need should already be in the browser.
Created attachment 811023 [details]
testcase.html
OK, thanks for looking into this. I tried to reduce your testcase a bit further (see attachment 811023 [details]) and indeed it turns out that this is related to a CSS conflict between MathJax and your page, a very common issue.

In particular the CSS rule

#idc-container span{display:inline}

makes all the span inline while the span used by MathJax to do its layout are inline-block. If you remove that rule from the reduced testcase, then the formulas appear normally. I'm not sure why the bug does not show up in Chrome and Opera ; perhaps they interpret the application of CSS rules differently or perhaps MathJax uses different code paths for the browsers...
(Reporter)

Comment 7

4 years ago
Well, that is irksome.

---

I'll let the MathJax people know, and I'll ask intensedebate if they need that line there (they overide it themselves for lots of things); that stylesheet is embedded in a javascript manipulating a new style element; I don't think I can rely on the order of imported stylesheets, and I definitely can't edit things out of that script...

Thank you for your time and patience,
--Jesse

(er... what's the right resolved type for one of these?)
Status: UNCONFIRMED → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.