# Inline MathJax is misaligned with surrounding text on Safari in OS X Yosemite #931

Closed
opened this issue Oct 12, 2014 · 18 comments

Projects
None yet
5 participants

### mattrajca commented Oct 12, 2014

 I am working with the following file and using MathJax 2.4: 

By definition $$corr(\{x,y\}) = mean(\{\hat{x}\hat{y}\}) = \frac{\sum_{i}^{} \hat{x}_i \hat{y}_i}{N}$$
Similarly, $$corr(\{y,x\}) = mean(\{\hat{y}\hat{x}\}) = \frac{\sum_{i}^{} \hat{y}_i \hat{x}_i}{N}$$
Since multiplication is commutative $$\hat{x}_i \hat{y}_i = \hat{y}_i \hat{x}_i$$ and the equations above are equivalent
We have shown that $$corr(\{x,y\}) = corr(\{y,x\})$$

 On Safari in Yosemite, most of the inline math is misaligned with surrounding text: This is not a problem when displaying the same file in Chrome.

Member

### pkra commented Oct 13, 2014

 Thanks for the heads up. I can't reproduce this on Safari 8 on iOS8 but I don't have access to Yosemite's Safari 8; it might bit slighly different.

Member

### dpvc commented Oct 13, 2014

 How dependent is the problem on the zoom level? That is, if you zoom the page in or out and reload it, are there zoom levels where the alignment is better? If you change the default font size for the page, do you get the same results?
Author

### mattrajca commented Oct 17, 2014

 If I zoom the page in once with Command +, the issue seems to go away.
Author

### mattrajca commented Oct 17, 2014

 If I increase the font-size of the page, inline MathJax is still off vertically by around 1 point.
Author

### mattrajca commented Oct 17, 2014

 I was able to resolve this by setting: font-size: 100.01%; on both the body and html elements. Hoping for a more elegant fix.
Member

### pkra commented Oct 20, 2014

 Thanks for the additional feedback. Yes, there should be a fix. Hopefully, Saucelabs will have Yosemite support soon so that we can investigate this further.

### timtylin commented Oct 23, 2014

 Just want to add that I can reproduce this even on Safari 6.2 on 10.8 Mountain Lion. In fact I went to the local Apple 4 week ago while they are still on 10.9 Mavericks, loaded up this page, and all the baseline are shifted up just like in the OP. Went back today after the Yosemite upgrade and everything still looked the same, with baseline shifted up. I also see the baseline shift on our lab machines, which are all on 10.8. In summary, so far I can at confirm that this baseline shifting problem exist in the latest version(s) of Safari across OSX 10.8 thru 10.10. I do not see this problem on Chrome 38 on my 10.8 machine.
Member

### pkra commented Oct 23, 2014

 @timtylin thanks for the report. I'm not seeing this on Safari 6 and 7 though -- see screecasts https://saucelabs.com/tests/df59cc087a0d42b1906054ed8b9b6101 and https://saucelabs.com/tests/194566f66fba4efebe84da3676e7ff4a Any other information that might help us track this down?

### timtylin commented Oct 23, 2014

 Thanks for the quick follow-up Peter. I think this problem actually started with the latest point releases (6.2 for 10.8, which means sometime in the past few months). Each OSX will not get newer major version of Safari (e.g., 10.8 will always have Safari 6.x), but I think in the later point releases they will incorporate newer renderers. I've only began to notice this problem after Safari 6.2 landed. Haven't noticed it before (and also didn't start using MathJax heavily until April of this year). I notice that your Selenium session is on a fresh 10.8 install, which means it's only on 6.0. That's probably why you can't reproduce. Here's a screenshot:
Member

### pkra commented Oct 24, 2014

 Ah! Thanks for that pointer! I got my hands on Safari 7.1 and see the issue (and it did not dissapear on zoom for me there). Judging from a screenshot generated by browserstack, Safari 6.1 does not exhibit this, so it's 6.2 specific.

### timtylin commented Oct 24, 2014

 I've done a little more digging and it looks like the biggest possible culprit might be the fact that they've now fixed sub-pixel CSS rendering as part of the Yosemite release, and back-ported it for 6.2 and 7.1. Source (AFAIK, 8.0 = 7.1 = 6.2 in terms of rendering behavior) However, I don't know enough about MathJax to know if there is compensation for Safari's sub-pixel positioning built-in, and whether turning off any compensation restores the normal behavior.
Member

### pkra commented Oct 24, 2014

 Thanks for the additional pointer! We have a few hacks for Safari, see e.g., https://github.com/mathjax/MathJax/blob/master/unpacked/jax/output/HTML-CSS/jax.js#L2970-L2972. But if this occurs on SVG output as well, then the problem will probably lie elsewhere.

### jxxcarlson commented Nov 3, 2014

 Yes it is safari, chrome OK. Compare http://epsilon.my.noteshare.io/notebook/195/?note=872 in both.

Member

### dpvc commented Dec 6, 2014

 @timtylin is correct that it is due to the sub-pixel CSS rendering introduced in Safari 6.2 = 7.1 = 8.0. We faced the same issue in Chrome with issue #443, and the fix there looks like it works in 6.2. I will work up a fix.

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

 Add more version information for Safari, and use Em rounding for Safa… 
…ri 8.0 (also 6.2, 7.1, which have the same WebKit version). Resolves issue mathjax#931.
 ae0f3fe 
Member

### dpvc commented Dec 6, 2014

 The issue931 branch of my fork of MathJax includes the fix for this.

### dpvc pushed a commit to dpvc/MathJax that referenced this issue Dec 7, 2014

 Merge branch 'issue931' into develop. Issue mathjax#931. 
 f6bf4c1 
Member

### dpvc commented Dec 7, 2014

 => Merged.

Member

### pkra commented Jan 6, 2015

 @dpvc I'm seeing the same issue on the SVG output (with the beta)

Member

### pkra commented Jan 6, 2015

 Moving this to new bug.

Closed