Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
mattrajca opened this issue Oct 12, 2014 · 18 comments

Comments

Projects
None yet
5 participants
@mattrajca
Copy link

commented Oct 12, 2014

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

<!DOCTYPE html>
<html>
<head>
    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({showProcessingMessages: false,
                           showMathMenu: false,
                           messageStyle: "none",
                           tex2jax: { inlineMath: [['$$','$$']], displayMath: [] },
                           TeX: {}});
    </script>
    <script type="text/javascript" src="mathjax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>

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

On Safari in Yosemite, most of the inline math is misaligned with surrounding text:

screen shot 2014-10-12 at 2 16 34 pm

This is not a problem when displaying the same file in Chrome.

@mattrajca mattrajca changed the title Inline MathJax is misaligned with surrounding text on OS X Yosemite Safari Inline MathJax is misaligned with surrounding text on Safari in OS X Yosemite Oct 12, 2014

@pkra

This comment has been minimized.

Copy link
Member

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.

screenshot

@pkra pkra added the Investigate label Oct 13, 2014

@dpvc

This comment has been minimized.

Copy link
Member

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?

@mattrajca

This comment has been minimized.

Copy link
Author

commented Oct 17, 2014

If I zoom the page in once with Command +, the issue seems to go away.
screen shot 2014-10-17 at 4 35 54 pm

@mattrajca

This comment has been minimized.

Copy link
Author

commented Oct 17, 2014

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

@mattrajca

This comment has been minimized.

Copy link
Author

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.

@pkra

This comment has been minimized.

Copy link
Member

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

This comment has been minimized.

Copy link

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.

@pkra

This comment has been minimized.

Copy link
Member

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

This comment has been minimized.

Copy link

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:

@pkra

This comment has been minimized.

Copy link
Member

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.

@pkra pkra added the Accepted label Oct 24, 2014

@timtylin

This comment has been minimized.

Copy link

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.

@pkra

This comment has been minimized.

Copy link
Member

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

This comment has been minimized.

Copy link

commented Nov 3, 2014

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

@pkra pkra added this to the MathJax 2.5 milestone Nov 3, 2014

@dpvc

This comment has been minimized.

Copy link
Member

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 dpvc added In Development and removed Investigate labels Dec 6, 2014

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

Davide P. Cervone
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.
@dpvc

This comment has been minimized.

Copy link
Member

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

@dpvc

This comment has been minimized.

Copy link
Member

commented Dec 7, 2014

=> Merged.

@dpvc dpvc added Merged and removed Ready for Review labels Dec 7, 2014

@dpvc dpvc closed this Dec 7, 2014

@pkra

This comment has been minimized.

Copy link
Member

commented Jan 6, 2015

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

@pkra pkra reopened this Jan 6, 2015

@pkra pkra closed this Jan 6, 2015

@pkra

This comment has been minimized.

Copy link
Member

commented Jan 6, 2015

Moving this to new bug.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.