iOS 11 large title navigation bar snaps instead of smooth transition

Question

I'm facing an issue where the large title navigation bar collapses very abruptly when scrolling on a UITableView embedded inside of a UIViewController. The problem seems to only occur when scrolling up on the screen. When scrolling down on the screen, the title transitions smoothly to being big again, but not vice versa.

This issue does NOT occur if using a UITableViewController.

Here is the normal, expected behavior when scrolling inside a UITableViewController.

And here is the broken, abrupt transition when using a UITableView inside of a UIViewController.

Here is the code for the broken implementation:

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 12
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Basic", for: indexPath)

        cell.textLabel?.text = "Title \(indexPath.row)"

        return cell
    }

}

The Navigation Bar has Prefers Large Titles checked and the Navigation Item has Large Title set to Automatic.

The code and configuration for both examples above is exactly the same except for the one being a UITableViewController vs. a UITableView inside of a UIViewController.

I have also observed that the broken behavior does NOT occur if the contents of the UITableView does not exceed the view's height. But once there are more cells than can fit on screen, it breaks.

Any idea if I'm doing something wrong or if this is an iOS 11 bug?

How are you configuring the Navigation Bar? Storyboard, Programmatically? Can you show the options or the code? — barbarity, Dec 31 '17 at 00:50
I think UITableViewController has implementation that handles this behaviour correctly. — Andrew, Dec 31 '17 at 00:53
@Villarrealized no I haven't found any docs on this. I believe this is minor bug in iOS 11. — Andrew, Dec 31 '17 at 01:23
Can I see the Storyboard hierarchy? I created a single view app with a View Controller Embedded in a navigation controller and it works as expected — barbarity, Dec 31 '17 at 11:02
Oh no. You're completely right. When the content is bigger than the screen it collapses abruptly. I'll investigate — barbarity, Dec 31 '17 at 11:09
I found a solution here: https://stackoverflow.com/a/50171002/8742572 It worked with me. — FarouK, May 12 '19 at 14:45

score 62 · Accepted Answer · edited Oct 20 '22 at 20:53

62

I faced same issue - I had UIViewController embedded in UINavigationController, the UIViewController had tableview with leading, trailing, top, bottom constraints to safe area. The whole tableview behaved jumpy / snappy. The trick was to change top constraint of tableview to superview.

edited Oct 20 '22 at 20:53

Koen.

25,449
7
83
78

answered Jan 11 '18 at 13:34

Soolar

676
7
4

1

Thank you! I tested this and it works. Changed the top constraint of the UITableView to reference the Superview of the UIViewController instead of the Safe Area and it is now smooth! I feel like this is still a bug on Apple's part though? Or there needs to be documentation about it. – Villarrealized Jan 12 '18 at 15:11
Brilliant. Was pinning the collectionView to the safe top anchor, and changing to view.topAnchor fixed the issue. Thank you – Kqtr Jul 14 '18 at 22:32
I am using collection view in viewController in XIB and set the constraint to superview but still facing the same problem. it behaves jumpy/snappy. is it any solution for that? – iOS Developer May 02 '19 at 09:17
I'm trying to fix this for a table view in a UITableViewController but I can't change the table view's constraints in the Storyboard. Do I have to use a UIViewController and add my own table view? The table view contains dynamic cells. I've tried to change it programmatically in the viewWillAppear() by using NSLayoutConstraint.activate([ tableView.topAnchor.constraint(equalTo: view.superview!.topAnchor)]) but this does not have an effect. – nontomatic Oct 14 '19 at 08:07
Thank you so much for this answer. Saved me a huge headache. – Feb 16 '20 at 19:21
Set `navigationBar.isTranslucent = true`. it works. – Ali Uzunoğlu Sep 26 '22 at 14:53

Filippo · Answer 2 · 2018-06-07T13:44:35.070

50

Put this line of code on your UIViewController containing UITableView and works fine for me.

Swift

extendedLayoutIncludesOpaqueBars = true;

Objective-C

self.extendedLayoutIncludesOpaqueBars = YES;

Set UITableView AutoLayout top space to "Superview" instead of "Safe Area"

edited Jun 07 '18 at 13:44

answered Jun 07 '18 at 13:18

Filippo

1,046
11
18

1

This worked, thanks! Doesn't matter if you're using a UITableView in a UIViewController or a UITableViewController as a child view controller, this seemingly fixes it. – SunburstEnzo Jun 21 '18 at 11:23
3

This caused issue for my safe area when my nav controller was contained inside a tab controller. With this, my table view doesn't account for the bottom safe area created by the tab bar. – Connor Jun 02 '19 at 18:01
@Connor in addition to extendedLayoutIncludesOpaqueBars, you can specify which of edges is extended with edgesForExtendedLayout; ==> extendedLayoutIncludesOpaqueBars = true edgesForExtendedLayout = [.top] – Frédéric Jun 19 '20 at 14:07

heyfrank · Answer 3 · 2020-05-26T14:23:14.557

7

I had a similar looking issue and solved it by removing UINavigationBar.appearance().isTranslucent = false from my AppDelegate.

UPDATE: If you don't want translucency, you should enable extendedLayoutIncludesOpaqueBars. That way all the glitches are fixed.

edited May 26 '20 at 14:23

answered Mar 28 '18 at 11:23

heyfrank

5,291
3
32
46

I can confirm that this fixes the issue. This is too bad bc. I'd like to have a non-translucent navigationBar. – benrudhart May 15 '18 at 17:59
The bouncy effects comes after unchecking translucent. – Phuah Yee Keat May 26 '20 at 13:45

score 4 · Answer 4 · answered May 12 '19 at 14:47

4

In Interface Builder:

Select your "viewController".
Attribute Inspector tick "Under Opaque Bars" and "Under Top Bars".
Make your top constraints of your scrollView second Item to "SuperView" not "SafeArea".

It worked with me.

Reference

answered May 12 '19 at 14:47

FarouK

740
6
17

Yongqiang Zhou · Answer 5 · 2019-12-27T02:44:37.600

Soolar's answer is right, but I don't know how to fix it in storyboard. Finally I solved the problem with Roman's solution in another question, by adding:

NSLayoutConstraint.activate([
    scrollView.topAnchor.constraint(equalTo: view.topAnchor),
    scrollView.leftAnchor.constraint(equalTo: view.leftAnchor),
    scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
    scrollView.rightAnchor.constraint(equalTo: view.rightAnchor)
])

in viewDidLoad.

Original answer: https://stackoverflow.com/a/48321447/1386369

iOS 11 large title navigation bar snaps instead of smooth transition

5 Answers5

Linked