iPhone Duo: vanishing vertical toolbars; odd nav bar behavior.

Update: the vanishing vertical toolbar was fixed by setting the tab bar's background color to clear:

self.tabBarController.tabBar.backgroundColor = [UIColor clearColor];

At least in the sim, the tab bar background is rendering on top of the foreground elements, not behind them!

As for the nav bar, setting the background color to clear does work (I hadn't set it correctly before due to a bug in my code), which eliminates the fixed white bar, but there's still a nasty blurred translucent region that comes and goes (sometimes fading in and out, other times popping on and off), whenever the title is visible:

At least I can set my scrolling view to be below the nav bar, so the blurred region never covers my content, but the scrolling title is, shall we say, sub-optimal.

So I'm still curious if that title animation can be turned off, so that the title stays onscreen regardless of the underlying view's scrolling.

Hi, Your post has shed some light on the issues which am facing, do you have any idea why there is a strip above the navigation bar?

In normal iphones, its looking good, only with duo this strip is getting displayed.

If you mean that white bit above your blue nav bar, that's the top of the underlying view (at least, in my app that's what it is).

My app uses UIViews that “fill their space", managed by a TabViewController. If I don't do anything to them in my code, they normally fill the space between the nav bar at the top of the screen and the tab bar at the bottom. However, in vertical-tab-bar modes on the Duo (and only on this device in this mode), the view starts at y=0, the top of the screen:

will layout CowViewController: top 0 height 58, window height 678

(And as you can see, its height is only 58 pixels, for no reason that I can immediately determine, as the tab bar's top is at Y=0, too. I wind up overriding my view's frame to fix this.)

Try setting your view's background color to something weird (like I did) to see if that's what's happening in your case, and setting the nav bar's background to a semitransparent color to be able to see through it.

Update: added the following to my views‘ viewDidLoad:

    if (@available(iOS 18.0, *)) {
        self.edgesForExtendedLayout = UIRectEdgeAll;
        self.extendedLayoutIncludesOpaqueBars = YES;
    }

...and now all the views extend full-screen, edge-to-edge on all devices in all modes.

(And, yes, I should have done this when iOS 18 came out instead of fiddling with my views‘ frames myself! I'm guessing the 58-pixel-high view in the screenshot above is a pathology that no one who has previously updated their app properly for iOS 18+ would ever see!)

To sum up:

1. The vanishing vertical tab bar was fixed by setting its background color to clear: it appears that (when a tab bar button is not pressed) the background renders on top of the tab bar items, not behind them.

2. Setting my views‘ self.edgesForExtendedLayout = UIRectEdgeAll not only made my views render edge-to-edge, it made my safe area insets start working to keep my content out from under the nav bar automatically, with no additional fiddling on my part — and my content now works perfectly with the upscrolling nav bar on the Duo.

Hello @sathamkhussain,

This is a bug we are aware of, however not many have filed a report, it would be helpful to the relevant engineering if you filed a report that I could share with them, with your minimal sample project attached. Please do this with Feedback Assistant and reply with feedback number.

Thank you!

As for a workaround, please see this response in this thread which provides a workaround that resolves this issue.

https://developer.apple.com/forums/thread/847499?answerId=906158022#906158022

I would like to add, while this has been reported and Apple is aware of the issue, the guidance shared in from the documentation in this thread is still true: Apply the color to your content layer rather than your navigation layer directly. If the bar scrolls away – or the content beneath it scrolls underneath, place the bar in a scrolling content container or the content in a scrolling container beneath the solid color to get your desired behavior. If you need help with coding a workaround, please create a specific thread about this issue and let me know, we can walk through those updates in your project.

I hope this information is helpful, @sathamkhussain !

 Travis

Hello @Anaxyrus Americanus,

Thank you for creating this detailed post with breakdowns and images.

This is a gorgeous cow image, however it's a bit hard to tell what's going on exactly in these screenshots with all the white backgrounds and light content.

I'm very happy to hear your update that the vanishing vertical tab bar was fixed by setting its background color to clear, however i'm not sure if this is the intended path. Are you able to file a feedback report using Feedback Assistant that explicitly demonstrates this behavior. Make sure that project is focused on just that issue, reply with the FB number when completed, I will make sure that report is routed to the relevant engineering team. Updates can be provided to you through Feedback Assistant from that team directly – or if they share details with me I will communicate them here.

For customizing the tab bar's background, the documented path is UITabBarAppearance through the tab bar's standardAppearance and scrollEdgeAppearance, so setting backgroundColor directly on the bar is best treated as a workaround.

As for setting your views' edgesForExtendedLayout to UIRectEdgeAll, that is the default value, so it isn't expected to change your layout. extendedLayoutIncludesOpaqueBars isn't expected to change the layout in a standard UINavigationController and UITabBarController hierarchy either. If setting them changed your layout, it's likely related to how your views are laid out inside your container. Positioning your content with Auto Layout and the safe area, instead of manual frames, will adapt better across poses. See Positioning content relative to the safe area and Prepare your app for iPhone Duo.

For your remaining question about the title and the blurred region that comes and goes while scrolling: that is the system's scroll edge effect, which is expected behavior on iOS 26 and later. You can adjust it on the scroll view through topEdgeEffect, including its style and isHidden. The large title's behavior is controlled with the navigation item's largeTitleDisplayMode.

Does that resolve all the issues in your post? If not, please provide more information, and feel free to file seperate Feedback Reports and/or Enhancment Requests for each behavior and send those in your follow up, this way I and the relevant engineering teams can get a head start on investigating those reports.

I hope this information is helpful.

Travis.