Page MenuHomePhabricator

Large inline Math images are not restricted to the viewport
Closed, ResolvedPublic

Description

Math element:
"enwiki > Tangent"

The element .we-math-mathml-inline has a width of width:43.617ex; which causes it to overflow the viewport.

Expected:
The image should never push itself out of the viewport.

  • the dd element wrapping the Math extension should apply class="noresize" to communicate to the mobile skin how it should be rendered

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 20 2017, 8:12 PM

Can be fixed with

dd .mw-math-element { display: block; }
Jdlrobson triaged this task as Normal priority.Mar 21 2017, 6:36 PM
Jdlrobson moved this task from Incoming to Needs Prioritization on the Readers-Web-Backlog board.
Jdlrobson added a subscriber: bmansurov.

@bmansurov does this seem 'triaged but future' to you? I've suggested normal priority.

Mhurd added a subscriber: Mhurd.Mar 25 2017, 12:20 AM
Jdlrobson updated the task description. (Show Details)Apr 19 2017, 9:17 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson renamed this task from Lazy loaded Math images inside `dd` tags do not overflow to Large inline Math images are not restricted to the viewport.Apr 20 2017, 8:13 PM
Jdlrobson updated the task description. (Show Details)

This has nothing to do with lazy loading. It seems to be a problem that would be best solved in the Math extension.

Change 351192 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Weaken noresize css rule

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

Change 351192 abandoned by Jdlrobson:
Weaken noresize css rule

Reason:
Not necessary

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

Jdlrobson updated the task description. (Show Details)

This is an issue with the Math extension, not MobileFrontend.
The good news is it is easy to fix - we just need to add a noresize class to the dl element's outputted by the Math extension.
I'm not sure where the definition list is created @Physikerwelt can you advise?

<dl><dd class="noresize"><span class="mwe-math-element"><span class="mwe-math-mathml-inline mwe-math-mathml-a11y" style="display: none;"></dd>
</dl>

That's not done by the math extension and cannot be fixed by the math extension, because there is no easy way the math extension can figure out if a math wiki tag is prefix with a colon. However, it can be fixed by replacing :<math> by <math display =block>. I did that on the linked page for one example.

@Jdlrobson by the way thank you for the excellent bug report. It should be linked in the "howto write a bug report" guide.

@Physikerwelt ahh.. I never realised ; was wikitext for the dd tag! Thanks for clarifying. This sounds like a local wiki issue that can be fixed on wiki.

The gif and thus the bug report is thanks to @Mhurd so I can't take the credit there :)

Change 351662 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] All dd elements should use overflow scroll

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

After looking into this we can fix this in MobileFrontend. Woop! ^

Change 351662 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] All dd elements should allow scrolling

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

Are you able to QA this?

@ABorbaWMF I have verified the fix in production. To verify I opened the article in a mobile browser and opened all the sections. After ensuring all images had lazy loaded I attempted to horizontal scroll the entire page and couldn't. This means that all the images are restricted to the viewport. The image after "The equation of the tangent line at a point (X,Y) such that f(X,Y) = 0 is then" can be horizontally scrolled.
I only tested this on my desktop so it would be useful to verify this on a good sample of devices.

@Jdlrobson Thanks for that info. It makes more sense now. I tested using browserstack on a variety of devices and browsers. The images are restricted to the viewport and extra wide images can be scrolled.

ovasileva closed this task as Resolved.May 16 2017, 12:18 PM

This interacts badly with quotebox styling.

To quote @Anomie :

It looks like what's happening there is that the skin sets overflow:auto on all <dd> and sets class quotebox to auto-width (and also sets word-wrap:break-word at a high level). So when the browser (at least desktop Firefox 52.2.0) tries to lay out the <dd> containing the "The following discussion is closed" and so on next to the floated quotebox with the close reason, it winds up making it 0 width and breaks the line between every letter.
cmadeo added a subscriber: cmadeo.Jun 12 2018, 11:30 PM

Just had a user report horizontal scrolling issues on the Color difference article. Some of the math is contained, but one section causes horizontal scrolling on the iOS app: https://www.youtube.com/watch?v=VowPDRO7FDE&feature=youtu.be