# Google Chrome sometimes puts the formulas too high or too low. #576

Closed
opened this issue Sep 17, 2013 · 19 comments

Projects
None yet
3 participants

### SixWingedSeraph commented Sep 17, 2013

 Here are some comments about MathJax rendition on my site http://www.abstractmath.org/Word%20Press/ which uses WordPress software and (on recent posts) the MathJax Latex plugin. Mike Stay Yesterday 1:08 PM Chrome on a mac makes all your formulae appear below the text that follows them. Safari and Firefox both render your page well. MathJax seems to fail only on your site, however; mathoverflow.net, for example, renders just fine. Screenshot here: http://i.imgur.com/25IX0DO.png﻿ Charles Wells Yesterday 3:56 PM Chrome on Windows 7 works fine, except sometimes the formulas are way out of line. Then refreshing usually makes it normal (sometimes you have to refresh twice). Thanks for notifying me.﻿ William Rutiser Yesterday 4:17 PM My Chrome on Windows 7 seems pretty non-deterministic. Repeated refreshing with F5 can give either result.﻿ Mike Stay Yesterday 4:26 PM How strange! When I hold down shift-⌘R to refresh the page without using cached content, it displays properly. When I use ⌘R without shift to refresh the page but use the files in my browser cache, it displays wrong. Whatever is being fetched from the cache is broken; I don't know if that's because of a bug in Chrome or a bug in the content being delivered to my browser.﻿
Member

### dpvc commented Dec 16, 2013

 I am not able to reproduce the problem. Is it still occurring for you or your user? If so, can we get a Chrome version number?
Author

### SixWingedSeraph commented Dec 17, 2013

 My Chrome version number is Version 31.0.1650.63 m. It still occurs occasionally.
Member

### dpvc commented Dec 17, 2013

 Thanks for the update. I'll check into it.

### ErnWong commented Jan 3, 2014

Hello, I have a similar problem on my own document. I have uploaded here: https://googledrive.com/host/0B72MM6AmH2NaajJfdlZnOFR0NGc/test.html

#### Rendering of $r=\sqrt{\left(x_2 - x_1\right)^2+\left(y_2 - y_1\right)^2}$:

##### Opera:

but the one with Opera might be a separate issue.

The page loads MathJax dynamically using document.createElement() and links to the secure CDN.

Thanks.

### ErnWong commented Jan 3, 2014

 Doing what they discussed, re-rendering the equations, works on my computer.
Member

### dpvc commented Jan 4, 2014

 @ErnWong, thanks for the test page and the images. The problem, here, is due to the web-fonts that are in use on the page. If MathJax runs before the fonts have arrived, it can't measure the size of the page font properly, and ends up getting the wrong sizes for the ex and em sizes (in fact, it gets 0 for both). This throws off the layout. There are several possible solutions in v2.3 of MathJax. One is to set the matchFontHeight property to false in the HTML-CSS block of your configuration (and also in NativeMML and SVG, probably). This would prevent MathJax from trying to match the surrounding font. This avoids the problem by not trying to measure the page font, but it does mean that the math may be too large or too small in comparison to the surrounding text. The other way is to use the MatchWebFonts extension, which will try to detect the loading of the page web fonts and redisplay the math when they arrive. This is something like the re-rendering that was recommended in the page that you link to. This extension is new in v2.3, and I would be interested to see how effective it is for you, as it has not seen a lot of use so far, and may need tweaking. I found out today, however, that the https version of mathjax/latest is still serving v2.2 not v2.3, so you would need to use https://c328740.ssl.cf1.rackcdn.com/mathjax/2.3-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML in order to get v2.3 until that is fixed. @SixWingedSeraph, you page also uses web fonts, so this is likely the problem there as well (though I didn't investigate it as carefully as ErnWong's page). The page listed in the forum page also uses web fonts.
Member

### dpvc commented Jan 4, 2014

 It may be possible to have MathJax wait a bit automatically if it finds the em and ex size to be 0. I'll check into it for a future version. But for now, one of the solutions above would be best.

### ErnWong commented Jan 17, 2014

 Thanks! I've set my font to equal MathJax's Gyre Termes and matchFontHeight to false, and it works brilliantly (except a few capital letters misaligned from the baseline). I also tried using the MatchWebFonts extension. It works well, but a  1 px wide poked through the text: (I'm not sure if the extension caused it though. It seems like as if it was) It occurs in Google Chrome and other web browsers too. Usually, it would be invisible, but in my document the parent's background colour was set to white, and the  inherited it (edit: sorry, it was my poor CSS skills, I've set every background white). Also, because it was in a link, the whole vertical span was also click-able.
Member

### dpvc commented Jan 17, 2014

 The span you have indicated is one that MathJax uses to determine the ex and em measurements. It is supposed to be removed after the measurements are taken. I'm not sure whey that isn't the case here. Can you post a link to a page that exhibits the problem (or you can send me one privately if you prefer)?

### ErnWong commented Jan 17, 2014

 Here you go! (but it's different to the images though. These pages are smaller): With MatchWebFonts.js ext. https://googledrive.com/host/0B72MM6AmH2NaajJfdlZnOFR0NGc/span.match.html Without extension https://googledrive.com/host/0B72MM6AmH2NaajJfdlZnOFR0NGc/span.none.html With extension, but not web font https://googledrive.com/host/0B72MM6AmH2NaajJfdlZnOFR0NGc/span.nofont.html The page with the extension leaves the spans most of the time, while the one without extension and the one without web fonts doesn't. edit: it seems that it doesn't show up all the time I've set every background white again, and added a black div to see it clearly.
Member

### dpvc commented Jan 18, 2014

 Thanks. I can reproduce the issue in the first link above. I'll check into it. It certainly seems that the measurement spans are not being removed. I'll let you know what I find.
Member

### dpvc commented Jan 20, 2014

 OK, I found the problem. The process used is to add the measuring spans (that you see as vertical lines) to all the math elements, then check if the size of any of them has changed since the last time, then remove all the spans. It is done in this order to avoid extra reflows of the page that would occur if you added, checked, and removed from each equation separately. In any case, what happens is that when an equation is found that needs to be rescaled, MatchWebFonts removes it from the list (since it won't need to be processed again later), and so when the spans are removed, that one fails to have its measuring span removed. It is an easy fix in the code, but not so easy to patch before we make a new release. You could add the following   to your file before the script the loads MathJax.js, and that should fix it until we make a new release. It's a bit long, but I don't see any better way for now. (Technically, there is a similar adjustment that should be done for the SVG output jax, but since you aren't using that, the chances are small that you will need it, so I'd leave that go and let the next release take care of that.)

### ErnWong commented Jan 23, 2014

 Thank you. I've tried adding the adjustment to https://googledrive.com/host/0B72MM6AmH2NaajJfdlZnOFR0NGc/span.match.html, and it seems that the issue still exists. Strangely, it seems that I can no longer see the issue in my original document now (without the correction): edit: I can see it now: https://googledrive.com/host/0B72MM6AmH2NaSGFtcm56aW5hdkk/11MPU/source.html But now, I realised that one of MathJax equations is missing: the $$+$$ that meant to be above the small arrow in figure 1.1. I might be misusing MathJax for that though.
Member

### dpvc commented Jan 23, 2014

 I think there is probably a timing issue here, and the MatchWebFonts extension signal is coming before the HTML-CSS jax is fully loaded, so the fix is not being applied (I checked and it isn't). So try changing the code to   and see if that fixes it.

### ErnWong commented Jan 24, 2014

 Thanks! Everything is working well now. (I changed HUB to MathJax.Hub)
Member

### dpvc commented Jan 24, 2014

 Good catch. I have modified my message above to reflect the change.

### dpvc pushed a commit to dpvc/MathJax that referenced this issue Feb 6, 2014

 Make sure measuring spans are removed from all elements (including th… 
…e ones that were changed). Resolves second half of issue mathjax#576.
 2c5ecf6 

Member

### dpvc commented Feb 6, 2014

 Sorry hit the "close" button accidentally.

### dpvc pushed a commit to dpvc/MathJax that referenced this issue Feb 21, 2014

 Add a check if defaultEm is zero, and retry after a delay if it is. W… 
…ebKit seems to have this happen sometimes when web fonts are used for the page (though hard to reproduce). Resolves issue mathjax#576.
 2de09d8 

Member

### dpvc commented Feb 21, 2014

 In terms of the issue with placement of the math being wrong (crushed up and below the line), I believe this is due to a problem measuring the em-size for web fonts that haven't arrived yet. I've added a test to see if the default em size ends up being zero, and if so, try again after a short delay. This seems to resolve the problem in my tests.

### dpvc pushed a commit to dpvc/MathJax that referenced this issue Feb 22, 2014

 Merge branch 'issue576' into develop. Issue mathjax#576. 
 d553f18 

Member

### dpvc commented Feb 22, 2014

 => Merged.