Page MenuHomePhabricator

<h2> expansion fails on Main Page, hence no sections displayed in mobile version
Closed, ResolvedPublic

Description

Multiple reports of <h2> failing to expand on a site's main page only. Behavior is correct on all other pages. https://www.mediawiki.org/wiki/Topic:Tx60idhth3a17iav

<h2> is displayed normally with exception of missing arrow to left. Upon tap, console logs show javascript error; there is no change to the Main Page display.

Details

Related Gerrit Patches:
mediawiki/extensions/MobileFrontend : masterThird party main page logic is incorrect

Event Timeline

Skonesam created this task.Sep 21 2017, 1:29 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 21 2017, 1:29 PM
Aklapper renamed this task from H2 expansion fails on Main Page to <h2> expansion fails on Main Page.Sep 21 2017, 2:04 PM
Aklapper updated the task description. (Show Details)

Thanks for reporting this. Is this only about the mobile version, or the desktop version? Can you provide a full link where to see the problem, please?

Sorry, should have specified it's only mobile with the MobileFrontend extension. (Though I get the same result when using a desktop browser — Safari and Chrome — but a mobile user agent)

Example: https://usnamemorialhall.org

Aklapper renamed this task from <h2> expansion fails on Main Page to <h2> expansion fails on Main Page, hence no sections displayed in mobile version.Sep 21 2017, 2:56 PM
Aklapper added a project: MobileFrontend.

Change 379783 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Third party main page logic is incorrect

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

We're going to need to see some examples to understand what's happening here.

Looking at this there is a bug when MFSpecialCaseMainPage is set to false.
The sections HTML is set up for section collapsing but should not be.

To be clear section collapsing should not work on the main page and that JavaScript should not be running. If the content is not accessible (e.g. hidden in a collapsed section then we have another problem... but I can't be sure of that until I see an example screenshot/live wiki to see this bug in action)

Oh I've seen https://usnamemorialhall.org let me look at what is happening there ...

Oh I've seen https://usnamemorialhall.org let me look at what is happening there ...

To be clear this is the intended behaviour it is not a bug. Sections will not collapse on mobile. The fix above will remove the JS warnings but it will not make these headings collapse.

Sorry for the delayed response! Not sure I'm following. The intended behavior is that <H2> tags on the main page don't behave like they do on any other page? Why would that be? Also, what ends up happening — at least on my site — is that the content below an <H2> is simply not displayed and cannot be viewed unless a user clicks through on the desktop site.

The intended behavior is that <H2> tags on the main page don't behave like they do on any other page?

@Skonesam the problem we have is most main pages we've encountered up until now have made use of templates and placed headings inside boxes
e.g.

<div>
  <h2>Todays featured article</h2>
  <div>Content</div>
</div>

Thus the main page has been optimised for that style of content - a landing page with minimal content (e.g. links/small short sections) rather than a long corpus of text. There's not an easy technical way to do both right now. Since there are no Wikimedia wikis that work this way we're unlikely to change this unless someone volunteers some time to look into the issue and volunteer a patch to fix it.

is that the content below an <H2> is simply not displayed

How can I replicate this? Your site seems to be using a ".desktoponly" class added inside https://usnamemorialhall.org/index.php/MediaWiki:Mobile.css which is hiding content. When I remove that class I'm seeing content below H2s. ...

Thank you so much for your help.

My problem with too much text on the front page is only going to get worse — there's 2,650 men and women in the Naval Academy's Memorial Hall — so maybe this is the best time to figure out a better way. Having the <div> wrapper is a fine workaround to at least get the headers displayed. Thank you!

Are you able to apply the patch in https://gerrit.wikimedia.org/r/379783 ? I think this will help a little bit and it will be good to confirm

Note that the .desktoponly and .mobileonly class are leading to an incorrect table of contents on https://usnamemorialhall.org/index.php?title=USNA_Virtual_Memorial_Hall&mobileaction=toggle_view_desktop so I wouldn't use it for too long.

You my want to consider using the .hlist class with horizontal scrolling. That might be better on mobile?

<div class="hlist" style="overflow-x: scroll;width:100%;">
* list item 1
* list item 2
</div>

Good luck working this out.

Jdlrobson moved this task from Inbox to Blocked on the User-Jdlrobson board.Sep 27 2017, 8:57 PM
Jdlrobson moved this task from Blocked to Doing on the User-Jdlrobson board.Sep 28 2017, 8:11 PM

Reviewed, looks ok. I merged the task but it requires some more diligent QA

Change 379783 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Third party main page logic is incorrect

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

Jdlrobson moved this task from Doing to Done on the User-Jdlrobson board.Sep 29 2017, 4:21 PM

Not sure I'm following the rationale or the fix. Why treat the main page differently at all? What's the purpose for making it a special case?

That aside, original problem wasn't really with expansion -- any content below an <H2> on the main page was simply not displayed.

@Skonesam it was supposed to be a short term fix when we enabled the mobile site for all the wikipedia projects. The main pages were not mobile friendly at all so we tried to make them so. So right now MobileFrontend is catering for those. When (if?) those main pages are made more mobile friendly we'd then be able to consider treating them the same. A config option could be added in the short term, but our team doesn't really have the resources or motivation to fix that, but we'll happily review patches. Unfortunately this is a situation where the code is overly Wikimedia project specific :-(

Jdlrobson closed this task as Resolved.Oct 3 2017, 9:29 PM
Jdlrobson claimed this task.

I've setup T177337 with suggested follow up work.

I'm also seeing this issue. The H2 content is being collapsed and cannot be viewed or accessed on the main page.

Is there a way to disable this "special casing" for the main page, and treat it like any other page?

@RobotBen - there is a task T177337 but it requires a volunteer.

Gagarine added a subscriber: Gagarine.EditedFeb 4 2018, 7:09 PM

I don't understand the logic neither, you can already use

<div class="nomobile">

Their is not need for a front page special case. If a page is not mobile ready, simply wrap in a div.

I don't understand what I should do to make sections collapsible for mobile on https://baripedia.org/wiki/Accueil . For the moment I wrapped it all in a div so at least they are visible.

@Gagarine the logic is a bit dumb and written specifically for Wikimedia wikis e.g. wikipedia

The problem is Wikimedia pages are very broken on mobile. If we wrapped non mobile ready content in a div for those wikis their main pages would be empty, hence they are treated differently.

It frustrates me that this is so Wikimedia centric but we rarely get 3rd party patches to fix things like this. It would be great if we did.
@Gagarine does the patch at https://gerrit.wikimedia.org/r/408467 fix things for you?

Gagarine added a comment.EditedFeb 6 2018, 2:58 PM

The patch https://gerrit.wikimedia.org/r/408467 did not works on my wiki.

You right you should simply wrapp in a div without the class nomobile. Then the content will be displayed using the desktop content parser.

In fact, it is what I end up doing on https://baripedia.org/wiki/Accueil . Of course sections are not collapsible.

You can certainly remove this "mainpage feature" and nothing will append because Wikipedia's front page use div.

A sustainable option would be to have a flag to avoid mobile parsing when needed similar to <nowiki>.

You can certainly remove this "mainpage feature" and nothing will append because Wikipedia's front page use div.

This is not actually the case. A lot more happens under the hood for Wikipedia's home page. Check out https://en.wikipedia.org/wiki/Main_Page?useskin=minerva&useformat=desktop which shows how it looks without the formatting

A sustainable option would be to have a flag to avoid mobile parsing when needed similar to <nowiki>.

Mobile doesn't actually parse anything. It formats html (e.g. strips and restructures resulting html)

did not works on my wiki.

Whoops. I forgot to update the js too. Try this patch as well: https://gerrit.wikimedia.org/r/408833
It also seems like your main page uses a <div> to wrap headings - you'd need to remove this. I've verified this works locally with your patch.

Gagarine added a comment.EditedFeb 7 2018, 5:55 PM

Mobile doesn't actually parse anything.

Sorry, I'm not familiar at all with mediawiki . By parsing, I wanted to say, "parsing the HTML" / reformat.

Whoops. I forgot to update the js too. Try this patch as well: https://gerrit.wikimedia.org/r/408833

This patch works. Thanks!

It also seems like your main page uses a <div> to wrap headings

That was a workaround to make the content visible on mobile. It's why I taught that wikipedia page should be immune to mobile "reformating".

Great! Thanks for the feedback!