bingle-admin wrote:

Prioritization and scheduling of this bug is tracked on Trello card https://trello.com/c/ytpXSO74

Do you mean the images?

Our css hacks do not seem to be targeting this but this looks like a bug in the Math extension - it should be wary that what it outputs effects small screens.

This is not an easy problem to solve as the math markup generates an image (which is an inline element) and the image can be contained in any sort of HTML block element. In other words, the math markup doesn't generate any block element of its own. For example, in the cited case, the math image is contained in a <dl> tag. If the <dl> tag were given the CSS "overflow-x: auto;" that would fix the problem. Unfortunately, CSS does not currently support parent selectors, so the only way to apply "overflow-x: auto;" to all <dl>s containing math images would be with jQuery, and even then it would only solve the issue for cases where the math is in a <dl>. It is also common for math images to live in div and paragraph tags. Once we can use CSS parent selectors (CSS4), we might be able to fix this, but I don't see any good solution in the meantime.

One possible, though problematic solution would be to set the max-width for all math images to 100%. This would cause the math images to always scale down to fit on the screen. For extremely long equations, though, this would cause them to be rendered extremely small.

How about we use JS to wrap all <img> tags from math (hopefully there's a way to identify them?) in a div and set overflow on that?

(Talking about only on Mobile, although making that a general thing would be good too.

The bug isn't really in the Math extension either. The bug is that any HTML block element in an article can contain an arbitrarily wide element (such as an image), which causes the page to scroll horizontally.

In theory, we could fix this by applying "overflow-x: auto;" to all common block elements: dl, p, div, etc. but I have no idea what other problems that might cause.

On bug 66680 I recommend the max-width: 100% solution; it's easy, but perhaps should be paired with restoring pinch-to-zoom...

Change 166075 had a related patch set uploaded by Bmansurov:
Wrap math formulas in a scrollable div

https://gerrit.wikimedia.org/r/166075

Change 166075 abandoned by Bmansurov:
Wrap math formulas in a scrollable div

Reason:
https://bugzilla.wikimedia.org/show_bug.cgi?id=72165

https://gerrit.wikimedia.org/r/166075

Issue should be addressed in the math extension...

physik wrote:

A solution would be change the default rendering mode to MathML.
I'd be happy to work on the Math part, if one explicit person that has ever worked with mobile before, decides to help me with testing.

physik wrote:

*** This bug has been marked as a duplicate of bug 72165 ***