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?

Answer 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

Answer 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"

Answer 3

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

Answer 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

Answer 5

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