Page MenuHomePhabricator

Investigate why math formula 'mwe-math-fallback-image-inline' CSS delivers a negative 'vertical-align' expressed in 'ex' units (relative to the x-height of the current font)
Open, LowPublic

Description

This seems to sometimes cause a slight vertical jitter when scrolling large math formulas.

These large formulas are properly scrolling side-to-side, but if you try to scroll them vertically they sometimes jump a pixel or two up or down apparently capturing the scroll event so it doesn't bubble up so the page itself can scroll.

You can see the issue in the animation here: http://imgur.com/a/P97nq (the file was too large to attach to the ticket).

The jitter issue goes away completely if the 'mwe-math-fallback-image-inline' 'vertical-align' is disabled.

It just seems odd to be setting a 'vertical-align' in terms of negative 'ex' units (relative to the x-height of the current font). I am not a css wizard, so there may be a great reason to do this which I'm not aware of.

( We could, of course, override this CSS in the iOS app to fix the issue we're seeing, but I thought it better to make a ticket tagging Math and MobileFrontend to see if others have more info. )

Event Timeline

Mhurd renamed this task from Investigate why math formula 'mwe-math-fallback-image-inline' CSS delivers a negative 'vertical-align' expressed in 'ex' units (Relative to the x-height of the current font) to Investigate why math formula 'mwe-math-fallback-image-inline' CSS delivers a negative 'vertical-align' expressed in 'ex' units (relative to the x-height of the current font).May 19 2017, 1:13 AM
Jdlrobson subscribed.

We'd need to work out the reason for the vertical align before fixing this.

We'd need to work out the reason for the vertical align before fixing this.

I don't see the vertical align being applied on the mobile site (using Chrome) but I see it on the regular site.

Most likely the problem arises from using inline math (+dl's) for faking display math (which until recently was a necessary hack).

For inline equations, MathJax will calculate that vertical shift so that the baseline of inline equations aligns with the text baseline.

The reason for the negative v-align is that we serve images for browsers that do not support MathML. Especially for inline formulae the baseline of the formula and the text should be aligned. The v-align hack helps to align these images.

The answer was given (equations need to adjust their baseline).

IIUC the main issue isn't the vertical align but that this somehow leads to vertical scrolling. Is this still a problem? If so, a link to an example might help.

LGoto triaged this task as Low priority.Aug 27 2019, 8:17 PM
LGoto moved this task from Tracking to Bug Backlog on the Wikipedia-iOS-App-Backlog board.

The task title ask for investigation, this has been answered (equations need to adjust their baseline)?