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 created this task.May 19 2017, 1:11 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 19 2017, 1:11 AM
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 added a subscriber: Jdlrobson.

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

Restricted Application added a subscriber: TerraCodes. · View Herald TranscriptMay 19 2017, 7:45 AM
Pkra added a subscriber: Pkra.May 19 2017, 8:06 AM

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.

^^ ignore my cross posting

Pkra added a comment.Dec 8 2018, 12:07 AM

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.

Pkra moved this task from Incoming to Design on the Math board.Dec 8 2018, 12:07 AM

Could this be related to T207929 @Mhurd ?

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.
Aklapper added a project: Design.Jun 24 2020, 5:40 AM
Aklapper moved this task from Design to Incoming on the Math board.Jun 24 2020, 5:41 AM