The Chinese Wikivoyage mobile version only shows part of the map; some tiles remain white/blank (due to local incorrect CSS)
Closed, ResolvedPublic

Description

The Chinese Wikivoyage mobile version does not display the map properly.

Ios and android are the same problem.

Sample-
http://zh.wikivoyage.org/wiki/竹北

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptThu, Dec 6, 11:32 AM

Thanks for reporting this! Indeed, looks like some tiles do not get loaded.

Aklapper renamed this task from The Chinese Wikivoyage mobile version does not display the map properly to The Chinese Wikivoyage mobile version only shows part of the map; some tiles remain white/blank.Thu, Dec 6, 12:08 PM

By the way... the Menu function does not click or use it.

Mholloway triaged this task as High priority.Thu, Dec 6, 4:16 PM
Mholloway edited projects, added Maps (Kartographer); removed Maps (Kartotherian).
Mholloway added a subscriber: Mholloway.

I can't see any backend errors and it looks like the pieces are all being loaded (scroll down to see them, out of place) but something is broken in the frontend JS.

(The page looks fine with JS disabled.)

@Yuriy_kosygin When was the last time you saw this working correctly?

@zhuyifei1999 Can you follow this problem? By the way, the Menu function does not click or use it.

(The page looks fine with JS disabled.)

The Kartographer dynamic map wouldn't load without JS

This is probably some sort of race condition. https://zh.m.wikivoyage.org/wiki/%E7%AB%B9%E5%8C%97?debug=1 Loads fine for me,

(The page looks fine with JS disabled.)

The Kartographer dynamic map wouldn't load without JS

/me nods

This is probably some sort of race condition. https://zh.m.wikivoyage.org/wiki/%E7%AB%B9%E5%8C%97?debug=1 Loads fine for me,

Ah, nice find.

I spent a good chunk of time on Friday and over the weekend attempting to reproduce this in MW-Vagrant, but could not; the dynamic map content loads and displays as expected. There must be some quirk in the Wikimedia production environment causing this. If anyone does manage to reproduce this locally, please add some steps in the description and I'll be very grateful!

This also works in safemode – https://zh.m.wikivoyage.org/wiki/%E7%AB%B9%E5%8C%97?safemode=1 – so it's probably a site script/default gadget that's broken.

I tried disabling all gadgets, still reproduceable.

Are MediaWiki.Common.js / MediaWiki.Common.css loaded for mobile version? Those are huge.

Are MediaWiki.Common.js / MediaWiki.Common.css loaded for mobile version? Those are huge.

No just mobile.js and mobile.css (also check Minerva.js and Minerva.css)
https://zh.m.wikivoyage.org/w/index.php?title=MediaWiki:Mobile.css&action=edit looks like invalid CSS to me. It's missing a closing brace (}) at the end.

zhuyifei1999 assigned this task to Jdlrobson.EditedTue, Dec 11, 6:21 PM
zhuyifei1999 closed this task as Resolved.

That might have just fixed it. Thanks @Jdlrobson for the finding and @Jdforrester-WMF for the fix :)

Tgr added a subscriber: Tgr.Tue, Dec 11, 6:49 PM

I can still reproduce this but only when the section is initially collapsed (ie. it seems the map does not get initialized properly when it is display:none'd at page load time). Not sure if that's what the task description was talking about or a different bug.

Steps to repro:

  1. in Chrome, open the dev toolbar and enable mobile mode
  2. visit https://zh.m.wikivoyage.org/wiki/%E7%AB%B9%E5%8C%97
  3. if the first section is not initially collapsed, collapse it and reload
  4. open the section

Couldn't reproduce it on an actual phone though.

This is weird, I was able to reproduce it the first time doing that (in Firefox mobile mode), but unable to reproduce it since.

Aklapper renamed this task from The Chinese Wikivoyage mobile version only shows part of the map; some tiles remain white/blank to The Chinese Wikivoyage mobile version only shows part of the map; some tiles remain white/blank (due to local incorrect CSS).Tue, Dec 11, 8:36 PM
Mholloway added a comment.EditedTue, Dec 11, 9:17 PM

@Tgr Is this what you're seeing?

If it's the same thing I'm reproducing, the map is invalidated and redrawn to display correctly on resize. It's a different (and IMO much lower-priority) issue than the one in this ticket.

Tgr added a comment.Tue, Dec 11, 9:52 PM

Yes, and yes it fixes itself on resize (or reload, since the section stays open).

TheDJ added a subscriber: TheDJ.Tue, Dec 11, 10:01 PM

Yes, this is a known issue for dynamically sized elements that are loaded via mw.hook (which loads fragments before they are added to the page dom). There are similar problems when you put maps or timedmediahandler within collapsed templates.

My Android phone can display the map normally, thank you for your assistance!

Shizhao moved this task from Backlog to Closed on the Chinese-Sites board.Thu, Dec 13, 7:47 AM