Page MenuHomePhabricator

Mobile VE toolbar flashes as page is scrolled
Closed, ResolvedPublic

Description

Behavior

  1. Navigate to an article (e.g. https://en.wikipedia.org/wiki/Ichi-go_ichi-e)
  2. Open VE by tapping any of the article's edit pencils (I opened the == In popular culture == section)
  3. Tap anywhere within the article, such that the cursor becomes visible
  4. Scroll the page by "flicking" your finger upwards (towards the top of your device)
  5. Notice that as the article content starts to move [as a result of "Step 4."] the editing toolbar is hidden from view

Actual

  1. ❗️Once the content has stopped "moving," notice the editing toolbar flashes repeatedly as it disappears and reappears: https://youtu.be/zv2qUXtEerE

Expected

  1. ✅ Once the content has stopped "moving," notice the editing toolbar returns to view and remains there until Step 4. is repeated

Environment

  • Device: iPhone XS
  • OS: iOS 13.5.1
  • Browser: Safari

Done

  • "Expected behavior" is implemented

Event Timeline

ppelberg created this task.Jul 31 2020, 1:21 AM
Restricted Application added a project: VisualEditor. · View Herald TranscriptJul 31 2020, 1:21 AM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

I couldn't reproduce this earlier when using iOS 13.3.??, but I see it now after upgrading to 13.6.1.

matmarex claimed this task.Aug 21 2020, 5:44 PM

Change 621827 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/VisualEditor@master] ve.init.mw.MobileArticleTarget: Fix floating toolbar workaround for iOS 13.6

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

Short explanation of the problem:

For context: On iOS, there's a browser bug that allows the editing toolbar to be scrolled out of view. We work around that problem by detecting when the toolbar is off-screen, and repositioning it so that it's on-screen again. (See T218414 for details.)

The problem here was: The code to detect it ran while the repositioning animation was still in progress, detected that it was partially off-screen in that moment, and started the repositioning animation again.

It looks like the bug was in there since we added that. I don't know why the issue wasn't affecting earlier versions of iOS. Probably the timing of the animation in the browser changed, or possibly the method we use to measure elements' positions didn't correctly take into account the ongoing animation before.

Change 621827 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] ve.init.mw.MobileArticleTarget: Fix floating toolbar workaround for iOS 13.6

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

For future reference, quick videos from my phone for comparison:

https://en.wikipedia.org/wiki/Dido_Sotiriou (without the patch):

https://en.wikipedia.beta.wmflabs.org/wiki/Dido_Sotiriou (with the patch):

ppelberg moved this task from To Triage to Triaged on the VisualEditor board.Aug 27 2020, 4:50 PM
ppelberg closed this task as Resolved.Aug 29 2020, 12:24 AM

For future reference, quick videos from my phone for comparison:

https://en.wikipedia.org/wiki/Dido_Sotiriou (without the patch):

https://en.wikipedia.beta.wmflabs.org/wiki/Dido_Sotiriou (with the patch):

This looks good.

Restricted Application added a project: User-Ryasmeen. · View Herald TranscriptAug 29 2020, 12:24 AM