1180612 - Tab tray animations jaggy (wrong) when status bar has non-default height

Status: RESOLVED FIXED

(Firefox for iOS :: Browser, defect)

Description

[Boris Dušek]

When the status bar has non-default height (e.g. when the "Personal Hotspot: 1 Connection" appears as a second line of the usual one-line status bar), the tab tray animations are jaggy:

- when presenting the tab tray (by pressing the "Show Tabs" button), the webpage shrinks to a tab flying into the tab tray, but it flies (converges) into a position offset a bit up of the desired position. After the animation ends, the tab then immediately jumps to the correct position, thus creating the strange non-polished effect

- when selecting a tab in the tab tray, it animates into the area of below the url bar, but again offset a bit down of the url bar. When the animation ends, then the webpage immediately jumps up by the said offset to fix its position to a correct one, thus creating the strange non-polished effect

See also the video of the issue I will be attaching separately.

Note that the issue does not happen with the usual "one-line" status bar - tab tray animations are flawless in such a case.

To simulate the non-default status bar, I think it is enough to:

- connect to the personal hotspot on the iPhone with some other device (in my case it suffices to have hotspot turned on in preferences and connect with a cable to my Mac)
- be on a call, which should display the call in progress in status bar (have not tried this, but seems analogical to the previous case)

I added the solved Bug 1164296 ("Tab Tray collection view extends into status bar") as "See Also", because it seems to maybe have something to do with this issue.

Comment 1

[Boris Dušek]

Attachment: Repro of Tab Tray animations jaggy with non-default height of status bar

Two steps recorded:

1. Presenting the tab tray
2. Selecting a tab from the tab tray

Comment 2

[Stephan Leroux [:sleroux]]

I'm definitely seeing this issue and have done some investigating. Before I can address the janky animations, there is a bug I'm noticing with the way the tab tray view is updating it's layout in response to the status bar changes. Try the following:

1. Launch the app in any iOS device simulator
2. Turn on the in-call status bar from the debug menu
3. Navigate to the tab tray controller
4. Rotate device to landscape

There seems to be a 20px gap between the top of the navigation bar and the view. Turns out this is a more deep rooted issue because that gap is not the view controller but the actual UIWindow of the application. Rotating back to portrait also causes a gap. 

From what I'm seeing so far, this issue is being caused by the way we're presenting the tab tray controller from our BVC which is the root and how the UITransitionView plays with UIWindow updates. A common practice is to use a UINavigationController as your applications root view controller and use it as the stage for your animations so you can prevent this sort of thing from happening.

Anyways, that's a long winded way of saying that in order to fix this bug, I fix need to make sure the layouts work correctly so that when the animation occurs, all of the frames and offsets are correct. I'm going to file a separate bug for this and link it as a dependency of this one.

Comment 3

[Aaron Train [:aaronmt]]

Is this the same bug as in the emulator you enable in-call status bar and see the tab tray animations jump?

Comment 4

[Boris Dušek]

(In reply to Aaron Train [:aaronmt] from comment #3)
> Is this the same bug as in the emulator you enable in-call status bar and
> see the tab tray animations jump?

Yes.

Comment 5

[Stephan Leroux [:sleroux]]

Resolved as part of https://bugzilla.mozilla.org/show_bug.cgi?id=1184233