Page MenuHomePhabricator

Maps fast preview is broken on 2nd attempt
Open, MediumPublicBUG REPORT


  • in your user preferences / editing tab, enable "Use live preview" (at the bottom) and save
  • edit source a page with a mapframe
  • click preview (the preview appears at the top) - check that everything is still ok
  • click preview again - now the map is shifted to the upper left corner inside the mapframe
On first previewOn second preview

Event Timeline

Yurik created this task.Nov 24 2016, 8:05 AM
Restricted Application added a project: Discovery. · View Herald TranscriptNov 24 2016, 8:05 AM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Yurik updated the task description. (Show Details)Nov 24 2016, 8:09 AM
Yurik removed a project: Maps.Dec 15 2016, 4:39 AM

Change 348657 had a related patch set uploaded (by JGirault):
[mediawiki/core@master] Live Preview: Attach to the DOM before 'wikipage.content'

JGirault moved this task from Backlog to Needs review on the Maps-Sprint board.

I can reproduce the described behavior on but I can not reproduce the behavior on a local wiki. When I add $wgUsejQueryThree = false; to the LocalSettings.php then I can reproduce the behavior. It seams that jQuery 3 fix the problem.

Change 348657 abandoned by Krinkle:
Live Preview: Attach to the DOM before 'wikipage.content'

JGirault added a comment.EditedApr 27 2017, 10:23 PM

The proposed solution using requestAnimationFrame (or L.Util.requestAnimFrame) works, but I am being careful to not break something. It's gonna require me more testing.

debt removed JGirault as the assignee of this task.Jun 6 2017, 7:51 PM
debt moved this task from Stalled/Waiting to Backlog on the Maps-Sprint board.
debt removed a project: Patch-For-Review.
debt added a subscriber: debt.

Moving to backlog until such time that we can take this up again.

Moving off the sprint board - the Discovery team won't be able to do this work at this time.

It is interesting why jQuery 3 solves this problem.

debt added a comment.Jun 15 2017, 3:27 PM

@Fomafix - would you be able to help fix this bug? Unfortunately, the Maps team doesn't have resources to do it right now.

As far as I see is this problem fixed when T124742 is enabled. It is interesting why jQuery 3 solves this problem and of course where is the problem exactly.

debt closed this task as Declined.Jun 19 2017, 6:16 PM

@Fomafix - great! I'll go ahead and decline this particular task then, since it'll be fixed with T124742's release.

Yurik reopened this task as Open.Jun 20 2017, 3:52 AM

This task is still valid, but it is needs to wait for the jQuery update. Reopening and making it the parent of the other one.

The problem is most likely that Kartographer JS code is trying to do something to the page before the dialog finishes loading.

jQuery 3 hides (not solves!) this problem because it calls promise callbacks asynchronously, so they happen slightly later now, and it just luckily for Kartographer now runs when the dialog is ready.

Note, opening the maps modal also triggers the below OOjs UI warning (T166729):

Using the return value of openWindow as a promise is deprecated. Use .openWindow( ... ).opening.then( ... ) instead.

With jQuery 3 I see on the second live preview the following error message in the JavaScript console when I hover the map:

Error: Invalid LatLng object: (NaN, NaN) mapbox-lib.js:1231:9

Maybe this is the same reason.

TheDJ added a subscriber: TheDJ.Aug 29 2017, 4:13 PM

For the record, I can still reproduce this issue on when following the steps in the task description.

Fomafix changed the subtype of this task from "Task" to "Bug Report".Mar 2 2019, 2:14 PM
Krinkle removed a subscriber: Krinkle.Apr 13 2020, 3:26 PM

Change 588459 had a related patch set uploaded (by TheDJ; owner: TheDJ):
[mediawiki/extensions/Kartographer@master] Use requestAnimationFrame to fix livepreview problem