Page MenuHomePhabricator

iPad: scrolling is broken when editing mobile site in source mode
Closed, ResolvedPublic

Description

I'm using an iPad Pro running iOS 12.1 and Safari, without a physical keyboard attached.

Access a mobile Wikipedia page such as https://en.m.wikipedia.org/wiki/Pope_Innocent_III , click the edit icon in the upper right, choose "Edit without logging in" and proceed to the (default) source editing mode. Now touch some text near the bottom of the editing area. The iOS virtual keyboard appears and the text is scrolled up so that the cursor remains visible, which is correct behavior. However, at this point it is impossible to scroll further up in the editing area. (Scrolling down remains possible.)

It's as if the editing area believes that it is showing the top of the text, forgetting that the appearance of the virtual keyboard caused the text to scroll.

Event Timeline

Jdlrobson added subscribers: Esanders, Jdlrobson.

@Esanders this sounds related to all those other bugs we've had. Is this a task i should merge this into?

(helps all users but tagging AMC so we have an opportunity to pick this up if we are working on related things)

JTannerWMF added a subscriber: JTannerWMF.

Hey @Esanders I will put this in needs discussion and let you decide next steps for our team with this.

all those other bugs we've had.

Not sure which ones you are referring to? I don't think anything we've changed anything that affects the MF editor.

Not sure which ones you are referring to? I don't think anything we've changed anything that affects the MF editor.

I was talking on a more general note.
We've had various problems with iOS scrolling and I remembered we removed some iOS specific browser sniffing recently for newer versions (T149363, T129360) and I was wondering if this is a variation of one of the many open or closed existing bugs or a regression from previous closed bugs. Looking through those search results I can't see any overlap, but wonder if there might be something that's not being discovered in that search.

I am sure this relates to code in Overlay.js (the setupEmulatedIosOverlayScrolling and _fixIosHeader function)
Provided you can replicate, I'd suggest disabling that and seeing if the problem goes away.

This code was written specifically for the editor (and generalised) so you should be empowered to remove it/update it as you please. I'd be open to removing it altogether and then fixing issues with older browsers as we discover them if you are open to that approach. Nobody really understands this code anymore so maybe it's time to start again and make sure we're working for the more widely used and modern browsers.

matmarex added a subscriber: matmarex.

This occurs because when iOS scrolls the cursor into view after opening the keyboard, it scrolls the browser viewport (and we otherwise go to great lenghts to avoid it from being scrolled, because on iOS we maintain our own viewport to work around lack of support for fixed elements). We work around this issue in mobile VE, but the mobile wikitext editor has no workaround for it.

Change 490697 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/MobileFrontend@master] Prevent editor fixed header from being scrolled out of view by touch keyboard

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

Change 490697 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Prevent editor fixed header from being scrolled out of view by touch keyboard

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

The change is part of MW 1.33.0-wmf.21, which is being deployed to Wikimedia wikis this week, 12-14 March, as described here: https://www.mediawiki.org/wiki/MediaWiki_1.33/Roadmap#21.

kaldari triaged this task as High priority.Mar 14 2019, 5:41 PM
kaldari updated the task description. (Show Details)

Same bug happens on regular iPhone.

kaldari renamed this task from iPad Pro/iOS 12.1: scrolling is broken when editing mobile site in source mode to iPad/iPhone iOS 12.1: scrolling is broken when editing mobile site in source mode.Mar 14 2019, 5:44 PM

Kaldari - See T21759 and other merged tasks.

@matmarex - This bug prevents me from being able to save an edit while on my phone (unless I either switch to VE or don't put an edit summary). English Wikipedia has already been updated to 1.33.0-wmf.21 and I cleared my browser cache on my phone, but it's still broken. Either the JS/CSS is still cached on the server side or that patch didn't fix the problem.

I'm using an iPhone SE with iOS 12.1 and mobile Safari.

@RhinosF1 - I think you linked to the wrong bug. Did you mean T218062 or T218069, maybe?

Kaldari - T217259
See the mentioned in section

Screenshot of bug on my iPhone. Can't scroll up from this position.

IMG_7135 (1).PNG (1×640 px, 92 KB)

Note that this happens any time I try to enter an edit summary.

Screenshot of bug on my iPhone. Can't scroll up from this position.

IMG_7135 (1).PNG (1×640 px, 92 KB)

Note that this happens any time I try to enter an edit summary.

@kaldari - Workaround is to pinch to zoom out repeatedly until it comes in view.

@RhinosF1 - Thanks, pinching works to get around the problem!

I confirmed that this bug occurs regardless of whether I am logged in or not (so not due to any personal CSS or JS).

Rummana was able to reproduce, but says that my bug is a different bug than this one. I'll file separately.

kaldari renamed this task from iPad/iPhone iOS 12.1: scrolling is broken when editing mobile site in source mode to iPad: scrolling is broken when editing mobile site in source mode.Mar 14 2019, 7:47 PM
kaldari raised the priority of this task from High to Needs Triage.

Filed separately as T218352.

Change 496682 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] iOS: Do not jump to top of text editor during typing

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

Change 496682 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Do not jump to top of text editor during typing

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

@kaldari My patch fixed this issue in the editor. But the issue you experienced is in the summary/preview panel, and I did not realize that was also affected (and apparently never tested what happens after clicking "Save"). Thanks for filing a separate task.

This should be fixed now. Can someone confirm?

@Jdlrobson - Seems to be fixed 99% of the time but with persistance I can zoom in/out enough I get:

E3523413-C41A-4B2C-B0E2-F9543B826A85.png (1×750 px, 134 KB)

@Jdlrobson - Seems to be fixed 99% of the time but with persistance I can zoom in/out enough I get:

E3523413-C41A-4B2C-B0E2-F9543B826A85.png (1×750 px, 134 KB)

Browser info:
iPhone 8 (Model MQ6H2B/A)
OS: iOS 12.1.4 (16D57)
Logged in: Y
URL of page: https://en.m.wikipedia.org/w/index.php?title=User:RhinosF1/sandbox&mobileaction=toggle_view_mobile#/editor/0
diff: https://en.m.wikipedia.org/wiki/Special:MobileDiff/887924872
Browser: Google Chrome (73.0.3683.68)

The issue is fixed, I'm closing.

@Jdlrobson - Seems to be fixed 99% of the time but with persistance I can zoom in/out enough I get:

E3523413-C41A-4B2C-B0E2-F9543B826A85.png (1×750 px, 134 KB)

Browser info:
iPhone 8 (Model MQ6H2B/A)
OS: iOS 12.1.4 (16D57)
Logged in: Y
URL of page: https://en.m.wikipedia.org/w/index.php?title=User:RhinosF1/sandbox&mobileaction=toggle_view_mobile#/editor/0
diff: https://en.m.wikipedia.org/wiki/Special:MobileDiff/887924872
Browser: Google Chrome (73.0.3683.68)

@AxelBoldt - Still possible to reproduce it

This comment was removed by RhinosF1.

@RhinosF1 - It's not quite clear to me what you are seeing with persistence and zooming. Is it the exact bug described here, i.e.: the wiki text inside the editing area cannot be scrolled further up just after you've started an edit session and the virtual keyboard has appeared?

Or are you seeing something akin to what @kaldari has described above, namely: you can't scroll up to reveal the Save button when trying to submit your article edits?

The latter issue is not what this bug is about.

@RhinosF1 - It's not quite clear to me what you are seeing with persistence and zooming. Is it the exact bug described here, i.e.: the wiki text inside the editing area cannot be scrolled further up just after you've started an edit session and the virtual keyboard has appeared?

Or are you seeing something akin to what @kaldari has described above, namely: you can't scroll up to reveal the Save button when trying to submit your article edits?

The latter issue is not what this bug is about.

T217259 @AlexBoldt

Hello @RhinosF1, I don't fully understand your reply. My question is this: can you still reproduce this bug (the wiki text inside the editing area cannot be scrolled further up just after an edit session has been started and the virtual keyboard has appeared) on your iphone?

AlexBoldt - Please read the task I said was merged into this as I can still reproduce that behaviour that has videos of the issue but It may link more to @kaldari 's issue which confuses me as to why it was merged here.

I see. I think it's a mistake to have T217259 closed as a duplicate of this bug; they are separate issues. I have reopened it.