Mobile VE toolbar flashes as page is scrolled
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	• ppelberg
	Jul 31 2020, 1:21 AM

Description

Behavior

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

Actual

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

Expected

✅ 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

Details

	Subject	Repo	Branch	Lines +/-
	ve.init.mw.MobileArticleTarget: Fix floating toolbar workaround for iOS 13.6	mediawiki/extensions/VisualEditor	master	+18 -5

Customize query in gerrit

Related Objects

Mentioned In: T255173: iPad, mobile mode, text editing is unstable
Mentioned Here: T218414: Editing toolbar on mobile VE is not sticky (can scroll out of view) on iOS

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

• ppelberg moved this task from Incoming to Ready to Be Worked On on the Editing-team (Kanban Board) board.Jul 31 2020, 1:21 AM

• ppelberg updated the task description. (Show Details)

• ppelberg mentioned this in T255173: iPad, mobile mode, text editing is unstable.Jul 31 2020, 1:25 AM

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

gerritbot added a project: Patch-For-Review.Aug 21 2020, 9:34 PM

matmarex moved this task from Ready to Be Worked On to Code Review on the Editing-team (Kanban Board) board.Aug 21 2020, 9:34 PM

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.

Demo link for the patch: https://patchdemo.wmflabs.org/wikis/99782ceb18312eca8b65dc352a07eae2/w/index.php?title=Lorem_ipsum&mobileaction=toggle_view_mobile&veaction=edit

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

ReleaseTaggerBot added a project: MW-1.36-notes (1.36.0-wmf.6; 2020-08-25).Aug 22 2020, 12:00 PM

Maintenance_bot removed a project: Patch-For-Review.Aug 22 2020, 12:10 PM

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

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

IMG_0526.MP43 MBDownload

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

IMG_0527.MP42 MBDownload

matmarex moved this task from Code Review to Ready for Sign Off on the Editing-team (Kanban Board) board.Aug 24 2020, 6:24 PM

matmarex added a project: Skipped QA.

• ppelberg moved this task from To Triage to Triaged on the VisualEditor board.Aug 27 2020, 4:50 PM

In T259321#6407228, @matmarex wrote:

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

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

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

This looks good.

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

	F32193889: IMG_0526.MP4
	Aug 24 2020, 6:24 PM

	F32193890: IMG_0527.MP4
	Aug 24 2020, 6:24 PM

Mobile VE toolbar flashes as page is scrolledClosed, ResolvedPublicActions