Page MenuHomePhabricator

Extraneous horizontal space in certain articles
Open, LowPublic

Description

The original article Eigenvalues and eigenvectors for which this task was filed appears fixed on mobile web but not in the app.

A similar issue of unexpected horizontal scrolling is also occurring on the Aswan Dam article on Wikipedia v2.7.239-r-2018-07-31.
In this case it appears to be related to a wide image (template:wideimage) within the article.

aswan dam horizontal scroll bug.gif (288×162 px, 2 MB)

Original task description

The Eigenvalues and eigenvectors seems to have a lot of horizontal space in it although no content is displayed any where in that space. This makes scrolling the article a little difficult as it seems to scroll to an empty space. The source of the space is not clear, probably due to a mathematical equation.

Possibly related to the change https://gerrit.wikimedia.org/r/#/c/351840/

The issue seems to be with the row "eigenvalues" in the "Applications" section.

space.gif (540×386 px, 853 KB)

Event Timeline

Dbrant added a subscriber: Dbrant.

@Kaartic This issue is not specific to the Android app; it also has this behavior on mobile web. For future reference on issues like this, please try viewing the page in a mobile browser, and see if the behavior is the same. And if it is, then file it as a bug under MobileFrontend .

bmansurov added a subscriber: bmansurov.

@Kaartic what browser are you using? Can you share a screenshot too?

Jdlrobson added a subscriber: Jdlrobson.

The wikitable in the "Applications" section is the issue:

<table class="wikitable" style="text-align:center; margin:1em auto 1em auto;"><tbody><tr><td></td>
<td><a href="/wiki/Scaling_(geometry)" title="Scaling (geometry)">scaling</a></td>
      </mstyle>

@Kaartic what browser are you using? Can you share a screenshot too?

I actually saw this issue in the Wikipedia Android app not in a browser. Do you want a screenshot of the app showing the issue ?

Added a screencast. It's definitely an issue in web too. @Kaartic feel free to check I've captured it correctly.

TheDJ added a subscriber: TheDJ.

Hmm. This is caused by the CSS of the .mwe-math-mathml-a11y elements inside that table.

the default css rules are

.mwe-math-mathml-a11y {
	/* We try to hide the MathML formula in a way that still makes it accessible to accessibility tools. */
	clip: rect( 1px, 1px, 1px, 1px );
	overflow: hidden;
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

which is eventually changed to

/* Reset some CSS properties set by MediaWiki and hide the image fallback */
.mwe-math-mathml-a11y {
    clip: auto;
    overflow: visible;
    position: static;
    width: auto;
    height: auto;
    opacity: 1;
}

by the native mathml extension https://github.com/fred-wang/webextension-native-mathml/blob/master/content-scripts/mediawiki.css if mathml is enabled.

So this is a stacking of problems.

The element has the classes: mwe-math-mathml-inline mwe-math-mathml-a11y

mwe-math-mathml-inline makes sure that this is ALWAYS displayed, due to "display: inline !important;". It seems that something then sets display:none, on the style attribute of it, which is ignored, because of the !important statement.

This combines with the absolute positioning and the 1x1 dimensions of the content, to create the additional overflow.

I think the reason for the important rule was to make sure that screen readers can access the mathml element. Thus removing that flag would break screen reader support.

Added a screencast. It's definitely an issue in web too. @Kaartic feel free to check I've captured it correctly.

Actually the issue's a little worse in the android app. Scrolling is possible even in other sections of the app that don't have the table.

Screen shots showing the issue

Screenshot_2017-06-12-14-26-17.png (960×540 px, 71 KB)

Screenshot_2017-06-12-14-26-33.png (960×540 px, 72 KB)

Screenshot_2017-06-12-14-28-37.png (960×540 px, 59 KB)

RHo renamed this task from Extraneous horizontal space in an article to Extraneous horizontal space in certain articles.Aug 1 2018, 9:56 AM
RHo edited projects, added Android-app-Bugs; removed Math.
RHo updated the task description. (Show Details)

The new case is a different problem - its an issue with template:wideimage. I will have a look later in my volunteer time.

FWIW Wikimedia staff fixing these on a case by case basis is unsustainable and I strongly recommend championing https://phabricator.wikimedia.org/T200880 so that editors are alerted and able to fix these problems themselves. I'm sure there are hundreds more of these kind of issues and it provides an easy path to identifying the issues and sharing the load of this problem.

While the original article Eigenvalues and eigenvectors for which this task was filed appears fixed, ...

@RHo It doesn't seem to be fixed yet. I still see this happen in 2.7.239-alpha-2018-07-31. It happens only if you expand the "More information" box in the "Applicatoons" section of the article.

OK. It seems to be fixed in mobile web but seems broken in the app. :-)

thanks @Kaartic - updated the description that this still occurring in the app for the Eigenvalues and eigenvectors, as well as the wide image issue on this other article.

The new case is a different problem - its an issue with template:wideimage. I will have a look later in my volunteer time.

FWIW Wikimedia staff fixing these on a case by case basis is unsustainable and I strongly recommend championing https://phabricator.wikimedia.org/T200880 so that editors are alerted and able to fix these problems themselves. I'm sure there are hundreds more of these kind of issues and it provides an easy path to identifying the issues and sharing the load of this problem.

Totally agree that T200880 being a more sustainable way to go. Another idea we've considered in the past has been providing an easy way for readers to also report mobile display issues they come across them: https://www.mediawiki.org/wiki/File:Report_an_issue_flow_B_-_Report_visual_display_error.pdf

A part of the problem lies in long inline equations.

For example, https://en.m.wikipedia.org/wiki/Eigenvalues_and_eigenvectors has a relatively long one in the subsection "dynamic equations": <math>x_{t-1} = x_{t-1},\ \dots,\ x_{t-k+1} = x_{t-k+1},</math>

That expression will be too large on a 320px screen but there is no practical way to apply overflow:auto in such a situation (CSS just can't).

Simple cases as this one might be fixable in the renderer (cf https://github.com/mathjax/mathjax-v3/issues/173) but in general there's no way of avoiding this -- equations can not always be broken up (e.g., imagine this expression occurred within a fraction).

The only general solution I know of on the web would be max-width: 100% but then you need some kind of zoom mechanism.

T201233 is somewhat related to this issue.