vertical alignment CSS not working on Firefox/Linux

[Debenben]

Using the current demo https://mathjax.github.io/mj3-demos/mj3-tex2html-global.html with Firefox/Linux the input \displaystyle\sum (1)\textstyle\sum (1)\scriptstyle\sum (1)\scriptscriptstyle\sum (1) looks like

where the bottom edges of brackets, numbers and operators are aligned, instead of

(LaTeX) or

(math.stackexchange)

[dpvc]

I am not able to reproduce your result in Firefox on Mac OS. On the other hand, if I disable one of the CSS rules, I do get your result, so I'm wondering if that rule isn't triggering properly for you.

Can you open the developer console and inspect one of the parentheses, and see if you see the highlighted rule below:

(the one for mix-symmetric > mjx-c)? If I disable this rule, I see the same result that you see.

[Debenben]

I think the rule is there:

If I disable the rule, it does not change anything.

[dpvc]

Thanks for checking. If you change middle to top in this rule, what happens? If you change it to 1em what happens?

[Debenben]

vertical-align: top

vertical-align: 1em

vertical-align: bottom

[dpvc]

OK, that is helpful. Can you try this? Select the mjx-symmetric element surrounding one of the parentheses, and add display: inline-block to the rule for that element:

Then select all the mjx-mstyle elements (one at a time) and add display: inline-block as element properties:

You'll have to do it individually, since there is no CSS rule for mjx-mstyle currently that would let you do it for all at once.

See if doing that resolves the issue (fingers crossed).

[Debenben]

I think that is the issue. I was able to apply it to the first bracket:

Maybe I am just too stupid to apply it to the others, but it seemed like the display: inline-block got inherited from the first one, so it was already shown in the console with the green marking and I couldn't add it again.

[dpvc]

OK, I've pushed a modified version for testing that includes the display: inline-block settings. Put your example into that and see if it works properly.

[Debenben]

No, that doesn't work. It ist the same as the unmodified version.

For the screenshot I uploaded earlier, I might have added some display: inline-block property falsely to some other element as well.

[dpvc]

OK thanks. I'll have to think of something else. What flavor of linux are you using, and what version of Firefox?

[Debenben]

debian stretch with firefox version 52.8.0

[zorkow]

I can reproduce that issue on Firefox/Linux v58.2.0 and v61.0b7 (aurora channel).

[zorkow]

I tried MacOS, Firefox v61.0beta and could not reproduce the problem.

However, on ChromeOS, Firefox v60.0.1 I can see the same issue. So it is probably a Linux problem.

[zorkow]

With Firefox/Chrome/Edge/IE11 on Windows, I can reproduce the same issue. So the expected behaviour seems to be a MacOS, Blink/Linux anomaly. Could it be a font related issue?

[davidlowryduda]

Do you mean that you could not reproduce the same issue on Windows?

[dpvc]

I am also able to reproduce on windows. So it looks like Mac OS is the outlier. I will have to rethink how this is being handled. Rats!

[dpvc]

I've made a PR (#125) that includes a fix for this.

[dpvc]

This has been merged into the master branch.