Vertical alignment in chrome on mac #295

Closed
RichardMorris opened this Issue Aug 22, 2012 · 12 comments

3 participants

@RichardMorris

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>

<head>
<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>
</head>
<body>
<p>
  foo $\mathbf{I} = \mathbf{a}\hat{\mathbf{a}} + \mathbf{b}\hat{\mathbf{b}} + \mathbf{c}\hat{\mathbf{c}}</math>$ bar</p>
</body>
</html>
@fred-wang

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/GeneralLayout/mpadded/mozilla/mpadded-1.html
MathMLToDisplay/Presentation/GeneralLayout/mpadded/mozilla/mpadded-2.html
MathMLToDisplay/Presentation/GeneralLayout/mpadded/mozilla/mpadded-3.html
MathMLToDisplay/Presentation/GeneralLayout/mpadded/mozilla/mpadded-5.html
MathMLToDisplay/Presentation/GeneralLayout/mpadded/mozilla/mpadded-1-2.html

MathMLToDisplay/Presentation/GeneralLayout/mpadded/mpadded1.html
MathMLToDisplay/Presentation/GeneralLayout/mpadded/mpadded-3.html
MathMLToDisplay/Presentation/GeneralLayout/mpadded/mpadded-4.html
MathMLToDisplay/Presentation/GeneralLayout/mpadded/mpadded-5.html
MathMLToDisplay/Presentation/GeneralLayout/mpadded/mpadded-6a.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.

@dpvc
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.

@dpvc dpvc was assigned Aug 22, 2012
@dpvc dpvc 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
@dpvc dpvc 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
@dpvc
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.

@dpvc
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.

@fred-wang

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

@dpvc
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.

@dpvc dpvc 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
@dpvc
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.

@fred-wang

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

@dpvc
MathJax member

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

@fred-wang

I just published the results and they look good.

=> Ready for release

@fred-wang

Davide, I think you can merge this branch into develop

@dpvc
MathJax member

Thanks, I will on my next round of merges.

@dpvc dpvc closed this Nov 1, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment