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

Bad spacing of sub-/superscript with CSS transitions #449

Closed
amonras opened this issue Apr 25, 2013 · 10 comments

Comments

Projects
None yet
3 participants
@amonras
Copy link

commented Apr 25, 2013

Congratulations for the great work.

I am having trouble combining CSS3 transitions with MathJax. The issue occurs in FF20.0 and Chrome 26.0, but not in Safari 5.1.9.

This is my HTML:

<html>
  <head>
        <script type="text/x-mathjax-config">
          MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\(','\)']]}});
        </script>
        <script type="text/javascript"
          src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
        </script>

    <link href="style.css" rel="stylesheet" />
  </head>

  <body>    
<p>This looks good: $a=3$. Text</p>

<p>This is bad: $a_k=b_k$. More text</p>
<p>This also: $(a+b)^2=a^2+b^2+2ab$</p>
<p>This also: $(a+b)^2=a^2+b^2+2ab$, but you wouldn't notice</p>
<p>$$ (a+b)^2=a^2+b^2+2ab$$
  </p>
  </body>
</html>

This is style.css,

span,strong {
    transition: .5s;
}

this is the end result:
mathjax

Incidentally, this makes it difficult to successfully combine MathJax and impress.js using the very convenient markup translation tool mdpress.

@amonras

This comment has been minimized.

@amonras

This comment has been minimized.

Copy link
Author

commented Apr 25, 2013

Actually, I fixed it by adding

.MathJax * {
    width: 1060px;
    padding: 40px 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}

to the css file. Don't know if this is a bug or just product of my utter ignorance.

@amonras

This comment has been minimized.

Copy link
Author

commented Apr 25, 2013

I'm leaving this bug open only because there seems to be an inconsistent behavior between formulas with sub/superscript and those without.

@dpvc

This comment has been minimized.

Copy link
Member

commented Apr 26, 2013

Your CSS asks every <span> to transition all its CSS properties, and since MathJax uses lots of spans to do its layout, your CSS make all the math transition any properties that MathJax specifies (including things like widths and positions). That means that when MathJax goes to measure the size of the the resulting mathematics, it does so before the transition has completed, and gets the size wrong, and so leaves the wrong amount of space for the equations.

The layout for super- and subscripts requires more <span> elements then your initial equation, and there is relative positioning as well as widths being specified in those cases, but not the first. So that means they get the transitions you have specified in your CSS, while the first doesn't.

Certainly if you force transitions on all spans, things will go wrong with MathJax output. You might consider using a specific class rather than all spans. Although MathJax does try to isolate itself from the CSS you provide, CSS is way too powerful and complex for MathJax to be completely successful about that. So you do have to be careful about how your CSS can interact with MathJax, as it does in this case.

Your "fix" CSS seems problematic to me. I don't think you want to force the padding or width, as that could adversely affect some MathJax output. Similarly, I don't think you want to set the box-sizing to border-box, as that will cause MathJax to mis-compute the sizes of some sub-expressions. I think all you need is

.MathJax span {
    transition: none;
}

(you can add the other browser-specific versions if you want, but since your CSS doesn't include them, you don't really have to compensate for them either).

@amonras

This comment has been minimized.

Copy link
Author

commented Apr 26, 2013

thanks for the explanation. As you can tell, I am a complete novice, so it'll take a while to decode. I just tried to find a minimal reproduction of an undexpected behavior I encountered when using MathJax in combination with impress.js through this MDPress tool, but I think it's on the latter that things should be fixed. Thanks anyway.

@dpvc

This comment has been minimized.

Copy link
Member

commented Apr 26, 2013

We appreciate the minimal example -- that helps a lot. The "Expected behavior" means from MathJax's point of view (i.e., we don't consider it a bug in MathJax), not expected from your point of view. Certainly it is not what you expected since you were reporting it as an issue. That tag is only used to help us categorize the issues as we try to keep track of what needs to be fixed and what doesn't. It wasn't meant as a value judgement.

Thanks for reporting your problem. I will try to isolate the MathJax output from transition effects, but we will never be completely effective, I'm afraid.

@amonras

This comment has been minimized.

Copy link
Author

commented Apr 26, 2013

I understand "Expected Behavior" is context-sensitive. Thanks for the tips. Keep up the great work. It's highly appreciated in the scientific community :-)

@dpvc

This comment has been minimized.

Copy link
Member

commented Apr 26, 2013

The issue449 branch of my fork of MathJax includes CSS to try to isolate MathJax from CS transitions.

=> Ready for Review

@ghost ghost assigned dpvc Apr 26, 2013

@fred-wang

This comment has been minimized.

Copy link
Contributor

commented Apr 29, 2013

Looks like another bug in the category of "conflicts between MathJax and CSS" that can be easily fixed by some CSS definitions => Ready for Release, Do not write tests

dpvc pushed a commit to dpvc/MathJax that referenced this issue Apr 29, 2013

@dpvc

This comment has been minimized.

Copy link
Member

commented Apr 29, 2013

Looks like another bug in the category of "conflicts between MathJax and CSS" that can be easily fixed by some CSS definitions

Right. There sure seem to be a lot of them!

=> Merged

@dpvc dpvc closed this May 17, 2013

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.