| Jdlrobson | |
| Mar 20 2017, 8:12 PM |
| F9060480: Screen Shot 2017-08-13 at 11.06.47.png | |
| Aug 13 2017, 3:10 PM |
| F7887390: 2017-05-03 (1).png | |
| May 3 2017, 8:46 AM |
| F6779796: tangent.mov.gif | |
| Mar 20 2017, 8:12 PM |
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.
@bmansurov does this seem 'triaged but future' to you? I've suggested normal priority.
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
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
Change 351662 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] All dd elements should allow scrolling
@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.
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.
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