Last modified: 2014-06-09 06:31:46 UTC
Steps to Reproduce: 1. Enable VisualEditor formulae editing at Special:Preferences#mw-prefsection-betafeatures. 2. Change math-related preferences to: * Leave it as TeX (for text browsers) (radio button; it's off by default) * MathJax (experimental; best for most browsers) (tick box; it's off by default) 3. Open a page like [[:w:Torque]] in VisualEditor. 4. Select a math formula from the page. 5. Open the math editing tool. 6. Change some thing in the formula (e.g., replace "alpha" with "beta"). 7. Look at the mess in the new version of the math formula (the one on the page, not the TeX code in the editing tool). Reproducible: Always See screenshots here: https://en.wikipedia.org/wiki/File:Bug_with_using_VE_and_mathjax.png https://commons.wikimedia.org/wiki/File:MathJax_mess_2014-04-28_at_2.33.08_PM.png
See https://en.wikipedia.org/w/index.php?oldid=606239634#Problem_with_MathJax_and_visual_editor. for an analysis of CSS-related issues. MathJax uses absolute positioning, and VisualEditor uses relative positioning.
The CSS problem is caused by this rule .ve-ce-protectedNode, .ve-ce-protectedNode * { position: relative !important; top: 0 !important; left: 0 !important; bottom: 0 !important; right: 0 !important; ... } MathJax makes heavy use of absolute positioning with elements like <span style="font-family: MathJax_Size4; position: absolute; top: -1.624em; left: 0.003em;">⎜<span style="display: inline-block; width: 0px; height: 3.975em;"></span></span> so the .ve-ce-protectedNode CSS overrides all the positioning creating the mess.
*** This bug has been marked as a duplicate of bug 60728 ***
