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?

Solution 1

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.

Here I recorded changing the constraint tableview iOS 11 bug constraint change

Solution 2

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"

Solution 3

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.

Solution 4

In Interface Builder:

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

It worked with me.

Reference

View more solutions

Comments

[Villarrealized]

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.

[benrudhart]

I can confirm that this fixes the issue. This is too bad bc. I'd like to have a non-translucent navigationBar.

[SunburstEnzo]

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.

[Kqtr]

Brilliant. Was pinning the collectionView to the safe top anchor, and changing to view.topAnchor fixed the issue. Thank you

[iOS Developer]

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?

[Connor]

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.

[nontomatic]

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.

[Admin]

Thank you so much for this answer. Saved me a huge headache.

[Phuah Yee Keat]

The bouncy effects comes after unchecking translucent.

[Frédéric]

@Connor in addition to extendedLayoutIncludesOpaqueBars, you can specify which of edges is extended with edgesForExtendedLayout; ==> extendedLayoutIncludesOpaqueBars = true edgesForExtendedLayout = [.top]