# mathjax/MathJax

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.

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

Closed
opened this issue Apr 25, 2013 · 10 comments

Projects
None yet
3 participants

### amonras 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: 

This looks good: $a=3$. Text

This is bad: $a_k=b_k$. More text

This also: $(a+b)^2=a^2+b^2+2ab$

This also: $(a+b)^2=a^2+b^2+2ab$, but you wouldn't notice

$$(a+b)^2=a^2+b^2+2ab$$

 This is style.css, span,strong { transition: .5s; } this is the end result: Incidentally, this makes it difficult to successfully combine MathJax and impress.js using the very convenient markup translation tool mdpress.

Closed

Author

Author

### amonras 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.
Author

### amonras 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.
Member

### dpvc commented Apr 26, 2013

 Your CSS asks every  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  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).
Author

### amonras 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.
Member

### dpvc 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.
Author

### amonras 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 pushed a commit to dpvc/MathJax that referenced this issue Apr 26, 2013

 Try to isolate MathJax from CSS transitions. Resolves issue mathjax#449. 
 94e92dc 
Member

### dpvc 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

Contributor

### fred-wang 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

 Merge branch 'issue449' into develop 
Resolves issue mathjax#449.
 d09d4d7 
Member

### dpvc 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 closed this May 17, 2013

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