Page MenuHomePhabricator

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


Math element:
"enwiki > Tangent"

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

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

Change 351192 abandoned by Jdlrobson:
Weaken noresize css rule

Not necessary

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>

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

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

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: