Navigation bar is transparent when scrolling starts in iOS15 only

Question

I've been searching different solutions and the one that I keep seeing repeatedly is to set the scroll edge appearance equal to the standard appearance. I have also looked at this solution. Neither solution is working for me. I am also not seeing that this issue appears once the user gets to the end of the scrollable content, which is what I believe scroll edge is. I am seeing the problem happen as soon as the user starts scrolling in a long list. I've included photos below, with confidential data blurred out. The only place in my app where the navigation bar looks correct is in the master view. My app architecture is master detail. It worked perfect in all navigation bars in iOS 14, this issue is specific to iOS 15.

Scenario 1: Master View Controller List View (nav bar looks correct once scrolling starts)

Scenario 2: After selecting an item on the MVC table (nav bar is transparent and not blurred once scrolling starts)

Here is my current view in storyboard with the default values for standard and scroll edge.

Some things I have tried besides setting scroll edge appearance equal to standard:

Unchecking transparent in Scroll Edge Appearances
Changing the blur style (in both standard and scroll edge)
Setting a background color

score 11 · Answer 1 · answered Nov 27 '21 at 21:47

In iOS 15, UIKit has extended the usage of the scrollEdgeAppearance, which by default produces a transparent background, to all navigation bars. Set scrollEdgeAppearance as below code. It is working for me.

if #available(iOS 15, *) {
        let appearance = UINavigationBarAppearance()
        appearance.configureWithOpaqueBackground()
        appearance.backgroundColor = < your tint color >
        navigationController?.navigationBar.standardAppearance = appearance;
        navigationController?.navigationBar.scrollEdgeAppearance = navigationController?.navigationBar.standardAppearance
    }

score 0 · Answer 2 · answered Sep 09 '21 at 20:21

0

I also encountered same issue. I’ve noticed that if I block out the code that set the background color (either through ZStack or .background(Color)), the transparency issue is gone. In my case, I needed to set the background color and have made a workaround which left the navigation bar in white instead of secondarySystemBackground color.

answered Sep 09 '21 at 20:21

user14341201

212
1
9

Can you share more details about your solution? In my case I never set a background color because I prefer the native look, or at least what it is supposed to look like/what it looked like in iOS14. I tried setting the background color to be secondarySystemBackground color but it looked exactly the same with regard to the transparency issue. – Kate M Sep 13 '21 at 13:52
After answering, I realised that you'r using UIKit while my situation is with SwiftUI. Besides the case when I have set background colour that causes the transparency issue, I also noticed that if I set the NavigationViewStyle to DoubleColumn. Not sure if this helps your setup in UIKit. – user14341201 Sep 24 '21 at 10:31

score 0 · Answer 3 · answered Oct 12 '21 at 05:16

Most solutions seem to only create a new appearance for the navigationController.navigationBar. However, if you have a tabBarController with a navigationController, you need to assign the appearance to the tabBarController as shown below.

Below is the code that solved the problem for me. Works for Light and Dark mode too.

Add this code to viewDidLoad for any of the VCs within the tabController.

    if #available(iOS 15, *) {
        let appearance = UINavigationBarAppearance()
        appearance.configureWithOpaqueBackground()
        self.tabBarController?.navigationController?.navigationBar.scrollEdgeAppearance = appearance
    }

I am not seeing this issue only when I am at the top or bottom of the page though. It's my understanding that is what scroll edge is? I am seeing it even while scrolling in the middle of a long list. Every solution I have found so far involves the code that you show above, which I already tried before I opened this question. — Kate M, Oct 22 '21 at 15:15

Navigation bar is transparent when scrolling starts in iOS15 only

3 Answers3

Linked