UITabBar transparent labels bug in iOS 13

Viewed 662

iOS: 13.1.2 Xcode: 11.1 (11A1027)

In our tab bar we opted for using transparent text for the tab items, so in iPhone we only show the tab item image, while the text is invisible (and it should be only visible on iPad), we do this by calling:

extension UITabBarItem {
    func updateTitleVisibility(for traitCollection: UITraitCollection) {
        switch traitCollection.horizontalSizeClass {
        case .compact:
            hideTabBarTitle()
        default:
            showTabBarTitle()
        }
    }

    func hideTabBarTitle() {
        imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
        setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.clear], for: .normal)
        setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.clear], for: .selected)
    }

    func showTabBarTitle() {
        imageInsets = .zero
        setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.licorice], for: .normal)
        setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.secondaryBlue], for: .selected)
    }
}

When compiling our app for iOS 13 (it didn’t happen on iOS 12), there is a strange behavior happening (notice the tab bar):

Video of the bug @ Imgur

(^ i didn't manage to embed it in the post)

Imgur

So the tab text sudden shows for the inactive tabs after presenting a full screen view controller, but incredibly enough when checking the view debugger the labels that are supposed to be transparent are indeed transparent

view debugger

Has anybody seen a behavior like that? How can I fix it

1 Answers

Well, this is due to the behavior in the default dark mode on iOS 13.

To achieve what you wanted with labels as on iOS versions below 13,

Simply add this into your Info.plist:

<key>UIUserInterfaceStyle</key>
<string>Light</string>

What this essentially does is changing the global user interface style to the light style which is the default style on iOS versions below 13.

If you won't prefer to change the user interface style, you can also change the tint color of the unselected items on the tab bar:

tabBar.unselectedItemTintColor = .darkGray

or to any other tint color of your choice.

Related