# Vertical alignment in chrome on mac #295

Closed
opened this Issue Aug 22, 2012 · 12 comments

### 3 participants

I'm seeing a lot of vertical alignment problems using mathjax with Chrome 21.0.1180.82 on a MacBook pro.

The following code gives a page which has two alignment issues, the letters with hats are raised slightly compared to the unhatted letters, also the whole equation is slightly raised compared to the surrounding text.

I don't get the same issue with Safari or Firefox.

<html>

<title>Jep: Creating mathml from expressions</title>

<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

<script type="text/javascript">
MathJax.Hub.Config({
jax: ["input/TeX","output/HTML-CSS"],
extensions: ["tex2jax.js"],
"HTML-CSS": {
scale: 150
},
tex2jax: {inlineMath: [['$','$'], ['\$','\$']]}
});
</script>
<body>
<p>
foo $\mathbf{I} = \mathbf{a}\hat{\mathbf{a}} + \mathbf{b}\hat{\mathbf{b}} + \mathbf{c}\hat{\mathbf{c}}[/itex]$ bar</p>
</body>
</html>


I also found many 1px vertical shifts in Chrome in the test suite.

MathMLToDisplay/Presentation/GeneralLayout/menclose/menclose-1i.html

(Issue 158) is one of them, but I can also mention

MathMLToDisplay/Presentation/GeneralLayout/mfrac/mfrac-1.html
MathMLToDisplay/Presentation/GeneralLayout/mfrac/mfrac-2.html
MathMLToDisplay/Presentation/GeneralLayout/mfrac/mfrac-3.html
MathMLToDisplay/Presentation/GeneralLayout/mfrac/mfrac-4.html
MathMLToDisplay/Presentation/GeneralLayout/mfrac/mfrac-5.html
MathMLToDisplay/Presentation/GeneralLayout/mfrac/mfrac-6.html
MathMLToDisplay/Presentation/GeneralLayout/mfrac/mfrac-7.html

MathMLToDisplay/Presentation/TokenElements/mspace/mspace-3.html

MathMLToDisplay/Topics/EmbellishedOp/embellished-op-1-1.html
MathMLToDisplay/Topics/EmbellishedOp/embellished-op-1-2.html
MathMLToDisplay/Topics/EmbellishedOp/embellished-op-1-3.html
MathMLToDisplay/Topics/EmbellishedOp/embellished-op-1-4.html

and probably more.

MathJax member

Yes, we've seen similar issues (as Fred points out). It looks like Chrome has gotten more touchy about this. I am looking into it, and will see what can be done about it.

was assigned Aug 22, 2012
pushed a commit to dpvc/MathJax that referenced this issue Aug 22, 2012
 Davide P. Cervone Make Chrome use px rather than em for better vertical alignment, and … …force placeBox to round to nearest pixel for baseline alignment spans. Also check that the height matches what we actually specified (but this means a page reflow, which will cost some performance in Chrome). Resolves issue #295. 76f52f6
pushed a commit to dpvc/MathJax that referenced this issue Aug 22, 2012
 Davide P. Cervone Make Chrome handle horiztonal stretchy characters better so that the … …ends don't misalign with the middle. This was affecting the overline in the square root, for example. Resolves a second part of issue #295 6b87ad7
MathJax member

The issue295 branch of my fork of MathJax should take care of this, and the related problem with elongated fraction bars and overlines in square roots that was reported on StackExchange, on the MathJax user's forum, and in issue #276.

MathJax member

It turns out that there is some variation in the heights of elements even when they are given explicitly in the CSS for the element. I have seen an element with style="height:38px" have an offsetHeight of 39px. It is these extra pixels that are shifting the characters around. The solution includes several features to help minimize the occurrence of this, including a dynamic check that compares the actual height to the specified height, but there are still some situations where it can still occur. For me, they all require zooming in or out, but there may still be some combinations of scaling that produce the error. It should be vastly less likely, however.

referenced this issue Aug 22, 2012
Closed

#### Chrome 21 (and 22) get fraction lines wrong when zoomed #276

The issue295 gives much better results in Chrome, especially with all these MathMLToDisplay/Presentation/CSS/* tests in HTML-CSS, which failed by a small vertical shift. Seems to have fixed most of the failures mentioned above too. There are still some small positioning/sizing errors, but these happen with other browsers too.

One problem: the changes break numalign/denumalign in mfrac in HTML-CSS. See

MathMLToDisplay/Presentation/GeneralLayout/mfrac/mfrac-2.html
MathMLToDisplay/Presentation/GeneralLayout/mfrac/mfrac-3.html
MathMLToDisplay/Presentation/GeneralLayout/mfrac/mfrac-5.html
MathMLToDisplay/Presentation/GeneralLayout/mfrac/mfrac-6.html

MathJax member

OK, I've looked into this, and it turns out that switching from the relative measure (em) to an absolute one (px) does introduce some complications that I will need to address. So this branch isn't ready yet.

pushed a commit to dpvc/MathJax that referenced this issue Aug 24, 2012
 Davide P. Cervone Don't make mspace use handleSize, since it doesn't need to have font-… …size set. This was causing problems with the change to px from em's in Chrome. Should resolve problems Fred found with issue #295. 4594333
MathJax member

I think I have taken care of the issues in the mfrac examples (and I don't think I've introduced any new issues, at least I hope so). So I think we can try it again.

Results on Chrome look good... still waiting Opera and Firefox results.

referenced this issue Aug 28, 2012
Closed

#### Sometimes the top line of the root isn't displayed correctly #299

MathJax member

Issues #299 and #303 are being handled by this fix, so I've marked them as duplicates of this one.

I just published the results and they look good.

Davide, I think you can merge this branch into develop

MathJax member

Thanks, I will on my next round of merges.

closed this Nov 1, 2012
This was referenced Apr 22, 2013
Closed

Closed