Page MenuHomePhabricator

header on mobile talk pages appears within discussion on scroll-up
Closed, ResolvedPublic

Description

iOS 9, Safari

Go to https://en.wikipedia.org/wiki/Bernie_Sanders
click on talk page (must be logged in...for now)
click on longish discussion: Competitiveness, Sanders/O'Meara Honeymoon, etc
scroll to bottom
scroll up slowly
fixed top header appears repeated throughout the discussion at regular, screen-sized intervals

IMG_7389.PNG (1×750 px, 129 KB)

IMG_7390.PNG (1×750 px, 160 KB)

Event Timeline

JKatzWMF raised the priority of this task from to Needs Triage.
JKatzWMF updated the task description. (Show Details)
JKatzWMF added a project: MobileFrontend.
JKatzWMF added subscribers: JKatzWMF, Florian.
Jdlrobson triaged this task as Medium priority.Feb 17 2016, 6:14 PM
Jdlrobson set Security to None.
Jdlrobson subscribed.

I've been unable to diagnose this for about 2 days now so I'm putting it up for grabs. I was only able to reproduce it via the iOS Simulator since I still don't have a charger for my iOS testing device.

We had a similar bug to this on Zero a while back that I unfortunately was never able to diagnose because it resolved itself around the same time we eliminated the deprecation warnings. The two are unlikely to be related, but figured I'd mention it anyways.

With the help of @BGerstle-WMF, I've narrowed it down to one style rule:

.overlay-ios .overlay-header-container {
    position: absolute !important;
}

Disabling that rule doesn't appear to break anything for me, but I'd be hesitant to actually do so without knowing why it's there in the first place. There's already a position: fixed !important applied with lower priority on the class position-fixed though...

@jhobs, have you git blamed the file? Maybe you can find some explanation in the commit message.

If I remember correctly that is fixing a browser specific bug. The class name should probably be changed to overlay-legacy-ios and not apply to newer browsers.

I cannot re-produce the bug using a simulator.

@JKatzWMF is this still happening? Is it Bernie specific or are you seeing it on other talk pages. I cannot replicate either..

@Jdlrobson @bmansurov yes still happening. Happens on barack obama and donald trump as well.

@jhobs, are you able to reproduce this in the simulator? If so, which settings are you using?

@JKatzWMF, what's the specific device model and OS version on your physical device?

@dr0ptp4kt
device model: iphone 6
ios v 9.2 (13C75)

Someone should check if this can be replicated on browserstack. @bmansurov @jhobs do you have time?

Yeah, I'll look into it later today.

Able to reproduce in the simulator with the following:

Open Simulator
Hardware -> Device -> iOS 0.2 -> iPhone 4s
Go to https://en.m.wikipedia.org/wiki/Bernie_Sanders
Scroll down to "Discussion" button and click (must be logged in)
Click on virtually any discussion (I used "Hitler quote")
Scroll to bottom
Scroll up slowly

I think this'll be a quick patch, anyone mind if I pull it into the sprint?

@jhobs happy for you to work on this if you are idle (always feel free to work on bugs if you are) but let's not pull it into the sprint until the existing stuff in flight has been dealt with. For instance let's get those browser tests for T128350 working.

OK, I'll leave browserstack alone since Jeff is able to re-produce it locally.

Change 277607 had a related patch set uploaded (by Jhobs):
WIP: Fix phantom overlay title on scroll for iOS9

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

This is not quite as easily fixable as I expected. I uploaded a WIP patch with what I've tried so far, but for now I'm getting back to sprint stuff.

Removing the following code seems to fix the problem:

.overlay-ios .overlay-header-container {
    position: absolute !important;
}

Removing the following code seems to fix the problem:

.overlay-ios .overlay-header-container {
    position: absolute !important;
}

It does if you do it via the inspector post-render. If you do it in the code it causes major issues.

It does if you do it via the inspector post-render. If you do it in the code it causes major issues.

Issues on this version of iOS or other versions? Scope it to older versions like Jon says maybe?

It does if you do it via the inspector post-render. If you do it in the code it causes major issues.

Issues on this version of iOS or other versions? Scope it to older versions like Jon says maybe?

This version (iOS 9).

Change 278084 had a related patch set uploaded (by Jdlrobson):
Don't add two headers for talk section overlay

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

Change 278084 merged by jenkins-bot:
Don't add two headers for talk section overlay

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

Change 277607 abandoned by Jdlrobson:
WIP: Fix phantom overlay title on scroll for iOS9

Reason:
Seehttps://gerrit.wikimedia.org/r/278084

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

Verified on BC. Will roll out to production Thursday 24th