Some equations being misplaced under Chrome 7 on Windows and OS X.

[kim-em]

There have been several bug reports on MathOverflow (c.f. the MathJax bug report thread there) of equations being misplaced on the page when running Google Chrome 7.

Here are some examples:

1. http://mathoverflow.net/questions/45730/transitive-semigroups-of-2-times-2-matrices (which renders incorrectly for some users with Chrome 7 on Windows)
2. http://mathoverflow.net/questions/42629/can-all-n-manifolds-be-obtained-by-gluing-finitely-many-blocks/44500#44500 (renders incorrectly for some users with Chrome 7 on OS X)

In both cases, it's the last equation in a paragraph appearing before the beginning of the paragraph, instead of inside the text.

[kim-em]

Both of these now look okay, to me, but the same problem is occurring at, e.g. http://math.stackexchange.com/questions/120/is-1-a-prime-number/5735#5735

[dpvc]

This appears to be an issue related to WebKit, as I also see it in Safari, and there are similar reports for the iPhone. I haven't tracked it down, but it looks like this happens when the math is at the end of the line, and I suspect that WebKit is forcing a line break somewhere that it shouldn't, and the positioning of the math is ending up being relative to the wrong container. (This may also be the source of the problem with using MathJax within SVG).

I will need to look into the details of what is happening in this test case that you have provided.

[shogun70]

It must be a bug in Webkit rendering.The generated HTML looks fine, and if I do something simple like:

javascript:(function(el) { el.style.display = "none"; el.offsetHeight; el.style.display = ""; })(document.body); void(0);

then the math appears in the right place. Or even right clicking on any math in the page will have the same effect (I guess that assumes MathMenu is enabled).

Interestingly, the following works:

javascript:(function(el) { el.style.position = "relative"; el.offsetHeight; el.style.position = ""; el.offsetHeight; })(document.getElementById("MathJax-Element-27").previousSibling); void(0);

although at the end of the process the position style is back to the original, and other values of position (static, absolute) don't fix the rendering.

[kim-em]

I don't know anything about reporting bugs against WebKit, but if this won't happen otherwise I guess I can try.

[shogun70]

Thanks for the reminder - I've reported this in Webkit's issue tracker:
https://bugs.webkit.org/show_bug.cgi?id=50210

[fred-wang]

I'm not able to reproduce the bug.
I've tried with the stable releases of Chrome and Safari on Windows.

[kim-em]

Latest beta release of Chrome on OS X also look fine on these three examples.

[fred-wang]

What about the reduced testcase at

http://playground.meekostuff.net/MathJax-test/shogun70/master/issue24.html?script=%2FMathJax%2Fmathjax%2Fmaster%2FMathJax.js&run=Run ?

[fred-wang]

Someone has closed this bug but the status is still "accepted". I set the tag to "Cannot Reproduce". Feel free to change it back if you think it is not the right thing to do.

[shogun70]

The reduced test-case still fails for me in Chrome 10 on OS-X. I still see the bug in the wild, e.g.
http://math.stackexchange.com/questions/29993/equally-spaced-sequence-from-a-randomly-spaced-sequence/29995#29995

Do others not see this behavior?

[dpvc]

I'm not sure how the issue was closed (other than that it is very easy to hit "commit and close" rather than "commit"). I still see the problem in the test page you indicate, in both Chrome and Safari. I have seen similar things in Safari on the iPhone (but haven't looked recently).

I think this is still an active bug, so I'm opening it again.

Davide

[nealeyoung]

I still see the issue with Chrome (version 13.0.782.107 beta) and Safari on mac OS X Lion (10.7).

I see it on the page "http://greedyalgs.com/blog/chernoff-bound/" on the third paragraph from the top -- an "X" is appearing above the paragraph to the left, instead of at the start of the last line where it should be.

Interestingly, if I right-click on the out-of-place "X", it moves to its correct place.

Screenshots are at "http://greedyalgs.com/good.png" and "http://greedyalgs.com/bad.png".

-Neal

[shogun70]

I don't see Webkit addressing this until there is a significantly reduced test-case, i.e. one that doesn't use MathJax.

[dpvc]

I haven't been able to produce such a test case, and have trouble reproducing the problems that others see even on the cited pages, probably due to font differences. For instance the page nealeyoung cites uses font-family: Cambria,serif, and I don't have Cambria, and my serif font may not be the same as his, so the line breaks don't come at the same places. The bug is triggered when the math is at the end of the line and must wrap to the beginning of the next line (I'm thinking that some container is not being properly wrapped, and the absolute positioning that MathJax does is falling outside of its container and being positioned to the next outer one, like the containing paragraph, or something like that). It is possible that changes to the MathJax HTML-CSS output might be able to work around the problem, but until I have a reproducible test case that I can actually view myself, it is hard to do the testing.

Davide

[nealeyoung]

I've posted a minimal bad example using times new roman font at http://greedyalgs.info/bad.html .

It should look like

 00 
 X
 0

but it shows up like

 X
 00
 0

I'm attempting to put the html here also:

<!DOCTYPE html>
<html dir="ltr" lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<script type="text/javascript"
   src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</head>
<body>
<p style="width:1em;font-family:'Times New Roman'">00 <script type="math/tex;">X</script> 0 </p>
</body></html>

[dpvc]

That's great! Thanks, you saved me a lot of work isolating this. I will see what I can figure out from that.

Davide

[fred-wang]

Thanks very much for the testcase. I've been able to reproduce the problem and converted it into a != reftest.
I can confirm that it is fixed in v2.0-candidate.

http://devel.mathjax.org/testing/testsuite/Configuration/Contexts/issue24.html
http://devel.mathjax.org/testing/testsuite/Configuration/Contexts/issue24-ref.html

http://devel.mathjax.org/testing/testsuite/Configuration/Contexts/issue24.html?mathJaxPath=http://devel.mathjax.org/testing/mathjax/dpvc/v2.0-candidate/
http://devel.mathjax.org/testing/testsuite/Configuration/Contexts/issue24-ref.html?mathJaxPath=http://devel.mathjax.org/testing/mathjax/dpvc/v2.0-candidate/

==> in testsuite

[machete143]

I have a similar problem (firefox on the left, chrome on the right): http://imageshack.us/f/703/bugdt.png/

You can find the bug on this page:
http://www.serlo.eu/math/topics/show/Analysis/Infinitesimalrechnung/Kurvendiskussion/Aufgaben_zur_Kurvendiskussion
To see it you need to go to exercise 5a) and click on the "=" button (show solution). You will find it at "Extrema"

cheers

[fred-wang]

Or you sure it is the same issue? On your screenshot, it seems that some parts of the equations disappear, while this bug is about misplaced formulas. Is it possible for you to try with the v2.0 candidate?

[machete143]

yeah you are right. yes it is possible, can i get 2.0rc from a cdn?

[fred-wang]

You can try with

http://devel.mathjax.org/testing/mathjax/dpvc/v2.0-candidate/MathJax.js

(Note however, that some configurations will change in MathJax 2.0)

[machete143]

I can't get 2.0 working with chrome at all (gives me: [Math Processing Error]) :/ it seems to have trouble loading the imagefonts
Works fine though with safari (so the bug is fixed there)

I am using the TeX-AMS-MML_HTMLorMML config
-> http://devel.mathjax.org/testing/mathjax/dpvc/v2.0-candidate/MathJax.js?config=TeX-AMS-MML_HTMLorMML.js

[fred-wang]

Yes, the image fonts are not available on this branch (I don't know why your Chrome browser does not use webfonts).
Do you mean the bug was present on Safari with MathJax 1.1 and is now fixed?

[dpvc]

I think you should use

http://devel.mathjax.org/mathjax/dpvc/v2.0-candidate/MathJax.js

rather than the testing version, as it is a complete copy of the v2.0-candidate branch. It works in Chrome for me.

Davide

[machete143]

Oh I am sorry. Mathjax 1.1 (latest stable) was working fine with Safari. I thought that webkit in general was affected. So this is a Chrome only issue.
The non-testing version (the one you just gave me) works with chrome but it does not solve the issue.

It seems as if my co-workers removed the problematic formula without notifying me. I restored it so you can trace the bug (or whatever it is :) )

The Link is: http://www.serlo.eu/math/topics/show/Analysis/Infinitesimalrechnung/Kurvendiskussion/Aufgaben_zur_Kurvendiskussion
Exercise 5 a) -> click on the button with "="
Go to "Extrema" and the formula which is not working is the one beneath
3x^2 - 2x - 1 = 0

[dpvc]

I looked briefly at it the day you reported the problem, and it is not the same issue as this one. I suspect it is because the math is typeset while the containing element has display:none, in which case MathJax can't properly measure the mathematics. In that case, MathJax uses a hidden div to typeset the math, but the measurements may not agree with what they would be in its actual location (especially if there is a font change from the body of the document). It looks like that may be the case here, and that it is the clipping box that is causing part of the math to not be shown. I haven't had the chance to look into it more carefully, though, so that is just by current guess.

I haven't looked into how you are doing the revealing of the answers. If the contents of the answer is being loaded into the page dynamically and typeset once it is loaded, then you might try revealing the answer first and then typesetting. That would at least tell us if the problem is due to the math not being displayed at the time it is typeset. If it is already part of the page initially (and so typeset during the initial typesetting pass), and is just being revealed, then that test can't be performed. (Though a different but harder one would be possible.)

Davide

[machete143]

The content is loaded dynamically into the solution div.
It works like this:
solution.appear({duration: 0.3}); // the box appears
solution.update('some content because html tags won't work here.gif'); // the box gets a loading gif. just for the nice looks ;)
new Ajax.Updater(solution,url,{}); // using prototype, the the content gets loaded from the server and inserted into the solution div. every call to Ajax.Updater fires an event, which calls "MathJax.Hub.Queue(["Typeset",MathJax.Hub]); "

The event (dom:changed) gets fired as soon as prototype hits ajax.responders.onComplete() which gets called after ajax.responders.onSuccess but I am not 100% sure about that! But if it didn't the Math would not be processed at all, would it?

[dpvc]

The Typeset() method is certainly getting called; the question is whether the mathematics is within a <div> that has display:none at the time the typesetting is being performed. If it is, then MathJax may not be getting the correct sizes when it measures the mathematics, and that might be the cause of the bad clipping box.

The issue I'm thinking it is would be with the timing of the solution.appear() and the MathJax Typeset() call. The appear() call is asynchronous, so it returns before the reveal is complete. So I'm wondering if you can delay the Typeset() call until after the appear() is complete (using setTimeout() to delay the Typeset() might be sufficient). When I viewed the page, the math already seemed typeset when it slides out, so that suggests the typesetting is occuring before the reveal occurs.

All this is guesswork; this might not be the problem at all, but I am pretty sure it has something to do with the interaction of the ajax with MathJax.

[machete143]

Oh I am so sorry it seems as if this is not a MathJax issue at all but an issue with chrome itself. It seems as if the table cuts off the content regardless of it being MathJax or MathML or just regular text. I am very thankful for your help and hope you didn't waste to much time trying to find a solution for this issue :)

[fred-wang]

I think you should use
http://devel.mathjax.org/mathjax/dpvc/v2.0-candidate/MathJax.js
rather than the testing version, as it is a complete copy of the v2.0-candidate branch.

FYI, I've modified how the MathJax branches are retrieved. The image font directory are still removed on branches to save disk place, but a symbolic link to the corresponding file in the master branch are used. That allows to use the image fonts with all the branches.

[dpvc]

That's fine, unless there are changes to the image fonts in some branch (which is not currently the case, but could happen in the future). Just something to keep in mind about this setup.

[fred-wang]

The issue reported here

https://bugs.webkit.org/show_bug.cgi?id=50210

is marked fixed. However, we still force a reflow as a workaround. Is it still necessary?