VisualEditor: Math formula does not display correctly if preferences are set to both TeX and MathJax
Closed, ResolvedPublic

Description

Steps to Reproduce:

  1. Enable VisualEditor formulae editing at Special:Preferences#mw-prefsection-betafeatures.
  1. 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)
  1. Open a page like [[:w:Torque]] in VisualEditor.
  1. Select a math formula from the page.
  1. Open the math editing tool.
  1. Change some thing in the formula (e.g., replace "alpha" with "beta").
  1. 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


Version: unspecified
Severity: normal

Details

Reference
bz64572
bzimport set Reference to bz64572.

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 ***

Add Comment