Page MenuHomePhabricator

On iPhone (TBC) section linking to other pages do not work properly
Closed, DeclinedPublic

Assigned To
Authored By
Prokaryotic_Caspase_Homolog
May 5 2018, 9:12 AM
Referenced Files
F22152134: image.png
Jun 12 2018, 7:11 PM
F18233239: Nexus 5 Summary.png
May 13 2018, 9:02 AM
F18230147: Session 3 Summary.png
May 13 2018, 3:54 AM
F18199670: Reproducing bug - half size 2.png
May 12 2018, 9:43 AM
F18199662: Edge on desktop half.png
May 12 2018, 9:31 AM
F18188581: Reproducing bug - half size.png
May 12 2018, 3:38 AM
F18150025: Genymotion half.png
May 11 2018, 4:35 AM
F17837185: Drill-down Link Expected vs. Actual.png
May 5 2018, 9:12 AM
Tokens
"Manufacturing Defect?" token, awarded by Jdlrobson.

Description

On phones, the mobile web interface does not link properly to sections on other pages.

Section linking works OK on tablets.

I have created a draft page to illustrate the issue, and have performed screen captures on my iPhone.
https://en.wikipedia.org/wiki/User:Jdlrobson/T193926# (was https://en.m.wikipedia.org/wiki/Draft:Einstein%27s_thought_experiments)

Drill-down Link Expected vs. Actual.png (658×987 px, 124 KB)

Developer notes

  • Noticed on iPhone 6S and iPhone 5
    • I can't see to replicate this in an iPhone simulator so this may require a real device.
  • Make sure "Expand all sections" is disabled in Mobile settings
  • Mobile only, not a problem on tablets

Event Timeline

Which browser are you using on your iPhone and which version? I can't seem to replicate this on the mobile web site. When clicking the link, after a little delay the correct section is scrolled to and expanded.

The behavior only shows up when the mobile web is accessed on a phone. The mobile web page works perfectly OK on a tablet, and the mobile web page works perfectly OK on a desktop.

The browser on my 5c is Safari.

My wife has a 6 plus. I just finished testing on her phone using Safari and it does the same thing.

I saw this problem on my iphone as well. Seems to happen when expand all sections behavior is on. The option for that seems inverted with its own results btw. Option (expand all sections by default) on -> sections collapsed, option off sections expanded

Thats opposite from how i remembered it....

ovasileva triaged this task as Medium priority.EditedMay 9 2018, 11:37 AM
ovasileva subscribed.

Chrome on android with expand all sections on - there's a FOUC with the behavior described here that later goes to the expected behavior.

Jdlrobson renamed this task from On phones, section linking to other pages do not work properly to On iPhone (TBC) section linking to other pages do not work properly.May 9 2018, 9:33 PM

Chrome on android with expand all sections on - there's a FOUC with the behavior described here

Yes that's by design and unavoidable. It sounds like the issue may be iPhone only.

@Prokaryotic_Caspase_Homolog do you have the mobile setting "Expand all sections enabled" ?

I can't see to replicate this in an iPhone simulator so this may require a real device.

It took me a long time to find the "Expand all sections" setting. I first thought it might be a Safari setting. Nope. How about a General setting. Nope. Finally I looked at the Wikipedia settings...

The default seems to be that the "Expand all sections" setting is OFF. The bug shows up in this case. Neither my wife nor I had ever touched this setting, explaining why we never knew about it.

When I slide the button to the right so that it turns blue, all of the sections start off expanded. Given this setting, THE BUG DISAPPEARS.

Of course, long articles become unmanageable with all sections expanded, since phones don't display the table of contents.

ovasileva raised the priority of this task from Medium to High.May 10 2018, 2:46 PM

@Prokaryotic_Caspase_Homolog thanks for checking. I haven't got a real iOS device to replicate this on right now, but hopefully I'll be able to get confirmation and a diagnosis next week.

I don't own a real Android device, so I downloaded three emulator programs to see how section linking would behave in an emulated android environment. I was unable to reproduce the bug in two of the emulator programs, but Genymotion, which runs an actual Android operating system in a virtual box, gave interesting results.

Genymotion half.png (418×820 px, 114 KB)

Genymotion has a fair share of its own bugs which I doubt that a real Galaxy S2 would display, but what I see certainly suggests that section linking can have issues on Android systems.

One frustrating thing about providing a good "how to reproduce" sequence is that the browser retains a memory of its state that persists even across reboot. At the moment, my iPhone seems to be working perfectly even though I've cleared the Safari cache. Also, everybody who would be working on this problem has a different phone than mine.

With an emulator working on a virtual machine, I should be able to "blow away" previous instances of the emulated device so that I can provide a consistent "how to reproduce" sequence starting from scratch that any developer can follow. Give me a few days to work this out.

I have found a sequence of actions that reliably reproduces the bug on a Genymotion emulator. Unlike the iPhone, where the bug shows up immediately, you have to work a bit to make the bug show up on an Android. But the bug is most definitely definitely there.

(original attached image replaced with screen captures in landscape arrangement)

Reproducing bug - half size 2.png (924×1 px, 410 KB)

I can reproduce the problem on the desktop using the Edge browser. Chrome and Firefox appear to be immune to the issue.

Unlike when I use an emulator on a virtual box, I cannot bring the system to a consistent starting state, so there is some apparently random variability, which I have noted in my instructions. The secret is to bring the width and height of the window down to where in the settings, the Expand all sections button shows up. Note that the desktop ignores the Expand all sections setting, and its default action is to display the sections expanded.

Edge on desktop half.png (638×983 px, 290 KB)

The same protocol described above which messes up the Edge browser also goofs up Internet Explorer on the desktop.

I tested out several so-called iOS "emulators," which are all actually iOS simulators. Apparently Apple's terms of service prohibit true emulators executing iOS within a virtual environment on Windows. However, I have found an online site that appears to offer a true emulator: appetize.io

A free account allows one concurrent user and 100 minutes per month. Each time you log in, your session starts with a clean slate, which is exactly what you want. Their online iPhone does not *initially* exhibit the bug, but must be coaxed into malfunctioning. The procedure to set up the malfunction is slightly different from what I used on the Genymotion emulator for Android or on Edge and IE browsers for desktop.

Session 3 Summary.png (1×2 px, 1 MB)

The misbehavior is permanent until I execute a revert sequence.

The appetize.io web site also allows a developer to confirm the ability to get Android to misbehave without having to download and install Genymotion and the virtual box. Here, I am demo'ing Nexus 5 on Android 7.1 using the default Chrome browser. The sequence I use here is slightly different from the sequence that I use for the iPhone.

The sequence that I used below for the Nexus 5 is the same sequence as that I used to get the Samsung Galaxy S2 to misbehave on the Genymotion emulator. Visually, however, there are some differences between the Nexus and the Galaxy. There are some odd visual effects showing up in the Galaxy emulation that I am not at all sure a real Galaxy would exhibit, and which in any event are not the topic of the present bug report.

Nexus 5 Summary.png (1×1 px, 991 KB)

As with the iPhone, the Nexus misbehavior is permanent until I execute a revert sequence.

Thank you for all these notes!! The team is currently at an offsite but we will review them when we get back to get to the bottom of this problem!

You're welcome! With approximately 40 percent of all Wikipedia users accessing via the mobile web, I have to be extremely careful that everything I do makes sense on multiple platforms. There are lots of places where I would like to put a "See also" reference to one or another section of this article, but I can't do so if the link sends practically all iPhone users and some unknown percentage of Android users into the boonies.

Incidentally, when I mention a "revert sequence"... I know revert sequences exist, because on my iPhone, I desperately tried one thing after another, and like a monkey typing Shakespeare, I successfully got my iPhone back to behaving sensibly. Then I had the hubris to *test out* my solution, and my iPhone is messed up again. :-(

My first impression when reading this task was that section collapsing could be achieved with CSS, avoiding this issue altogether (using the :target selector for example). However, it looks like that route has been thoroughly investigated T148591 T145106 T147338 and not pursued. ☹️

I just tried to reproduce this on an iPhone 6S, v11.3.1, in both Safari and Chrome, with the "Expand all sections" feature both on and off, and was not able to see the bug.

@Prokaryotic_Caspase_Homolog i am still struggling to replicate this bug. There are various variables at play here as you point out - we preserve open sections across sessions. Ive copied your page into my user namespace but the issue doesn't seem to be present there. Are you able to replicate the issue in that user page? If not maybe there was some property of the link causing the problem e.g. a redirect

@TheDJ do you have any ideas what's happening here?

@Jdlrobson - can you give me a URL so that I can try "to replicate the issue in that user page?"

I tried looking at your Wikipedia and MediaWiki sandboxes. No luck.

I found your link. Will test on my wife's phone, since I've been messing around with my phone so much, it probably doesn't represent a normal iPhone anymore.

@Jdlrobson - On June 11, User:XOR'easter replaced the draft version of with a redirect to the "real" version. I've just replaced the redirect with the demo draft and will put a note on User:XOR'easter's talk page to please not redirect again. I hope that you weren't trying to reproduce the bug after the draft had been redirected. :-(

Note added later: What I see at your link an earlier draft of the Draft???

@Jdlrobson - What I see at your link is an earlier draft of the Draft. The only thing I can figure is that User:XOR'easter and you must have been working at the same time or something.

This comment was removed by Jdlrobson.

That page is a copy and pasted old version of your draft. I'm using it purely to debug this bug but am unable to see the behaviour you reported.

Hmmm.... It's only my latest versions of the draft that have the demo link to a section

The following link is in the current Draft
https://en.m.wikipedia.org/wiki/Einstein%27s_thought_experiments#Quantum_mechanics

I should have phrased it better. Mea culpa!!! :-0

The draft version here
https://en.m.wikipedia.org/wiki/Draft:Einstein%27s_thought_experiments
has a link here to a section in the "real" article.

image.png (93×607 px, 11 KB)

ovasileva added subscribers: ABorbaWMF, pmiazga.

@ABorbaWMF - could you review some of the reproduction steps here from @Prokaryotic_Caspase_Homolog to see if you can reproduce from your side?

Vvjjkkii renamed this task from On iPhone (TBC) section linking to other pages do not work properly to hkdaaaaaaa.Jul 1 2018, 1:12 AM
Vvjjkkii removed ABorbaWMF as the assignee of this task.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed a subscriber: Aklapper.
Daimona renamed this task from hkdaaaaaaa to On iPhone (TBC) section linking to other pages do not work properly.Jul 1 2018, 12:10 PM
Daimona assigned this task to ABorbaWMF.
Daimona updated the task description. (Show Details)
Daimona added a subscriber: Aklapper.

@ovasileva: Tested it on a iPhone5s following the steps mentioned. Seems to be working fine for me, that section link does redirect to the correct section of the article.

Olga not sure what to do with this. Are you still experiencing the bug @Prokaryotic_Caspase_Homolog ?

Due to lack of activity. Please reopen with updated information if this is still a problem.